/**
 * SC Katana Customizer — dark editorial
 * Palette + typo alignées sur md-product.css. Scopé à body.sc-katana-page.
 */

body.sc-katana-page{
  --scx-bg:#0a0a0a;
  --scx-bg-alt:#141414;
  --scx-bg-panel:#0d0d0d;
  --scx-accent:#c9a048;
  --scx-accent-soft:rgba(201,160,72,.18);
  --scx-accent-bright:#e8c77a;
  --scx-cta:#2ea04d;
  --scx-cta-hover:#3cc265;
  --scx-text:#c9bfab;
  --scx-text-dim:#a89c85;
  --scx-text-mute:#6f6555;
  --scx-title:#e8e2d3;
  --scx-border:rgba(201,191,171,.1);
  --scx-border-strong:rgba(201,160,72,.35);
  --scx-font-serif:'Playfair Display',Georgia,serif;
  --scx-font-body:'Cormorant Garamond',Georgia,serif;
  background:var(--scx-bg);color:var(--scx-text)
}

body.sc-katana-page .entry-content,
body.sc-katana-page .entry-header{max-width:none!important;padding:0!important;margin:0!important}
body.sc-katana-page .ast-container,
body.sc-katana-page #content,
body.sc-katana-page main#main{
  max-width:none!important;width:100%!important;padding:0!important;margin:0!important;background:var(--scx-bg)!important
}
body.sc-katana-page .entry-title,
body.sc-katana-page .page-title{display:none!important}

/* ============= Layout global ============= */
.scx-app{
  padding:0 0 100px;  /* 100px pour laisser passer le footer fixed */
  font-family:var(--scx-font-body);font-size:17px;line-height:1.55;
  color:var(--scx-text);
  background:var(--scx-bg);
  position:relative;overflow-x:hidden
}

/* ============= Header ============= */
.scx-head{
  text-align:center;padding:32px 2vw 18px;max-width:1720px;margin:0 auto
}
.scx-kicker{
  display:block;color:var(--scx-accent);letter-spacing:.32em;text-transform:uppercase;
  font-family:var(--scx-font-body);font-style:italic;
  font-size:.78em;margin:0 0 14px;opacity:.9
}
body.sc-katana-page h1.scx-title,
body.sc-katana-page .scx-title{
  font-family:'Cinzel',Georgia,serif!important;
  font-style:normal!important;font-weight:600!important;
  color:var(--scx-title);
  font-size:clamp(1.9em,4.4vw,3.2em);
  margin:0;letter-spacing:.08em;line-height:1.15;
  text-transform:uppercase
}
.scx-divider{
  width:60px;height:1px;border:0;background:var(--scx-accent);margin:18px auto;opacity:.7
}
.scx-subtitle{
  font-size:1.05em;color:var(--scx-text-dim);font-style:italic;
  max-width:640px;margin:0 auto
}

/* ============= Layout 2 colonnes desktop / stack mobile ============= */
.scx-layout{
  display:grid;grid-template-columns:280px 1fr;gap:0;
  max-width:1720px;margin:0 auto;padding:12px 2.5vw 0;
  align-items:start
}
@media (max-width:960px){
  .scx-layout{grid-template-columns:1fr;padding:8px 4vw 0}
}

/* ============= Sidebar steps ============= */
.scx-steps-nav{
  position:sticky;top:20px;
  padding:0;
  background:transparent;
  max-height:var(--scx-match-h,min(calc(100vh - 100px),780px));
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--scx-accent-soft) transparent
}
.scx-steps-nav::-webkit-scrollbar{width:6px}
.scx-steps-nav::-webkit-scrollbar-track{background:transparent}
.scx-steps-nav::-webkit-scrollbar-thumb{background:var(--scx-accent-soft);border-radius:3px}
.scx-steps-nav::-webkit-scrollbar-thumb:hover{background:var(--scx-accent)}
.scx-steps-list{list-style:none;margin:0;padding:0}
.scx-step-item{margin:0;padding:0;border-bottom:1px solid var(--scx-border)}
.scx-step-item:last-child{border-bottom:0}
/* Ordre DOM : thumb, num, info, check → grid columns match cet ordre */
.scx-step-btn{
  display:grid;grid-template-columns:40px 26px 1fr 20px;align-items:center;
  column-gap:14px;
  width:100%;background:transparent;border:0;padding:12px 10px 12px 4px;
  color:var(--scx-text-dim);text-align:left;cursor:pointer;
  font-family:var(--scx-font-body);font-size:1em;
  transition:background .2s,color .2s;
  outline:0;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none
}
.scx-step-btn > .scx-step-thumb{margin-right:4px}
.scx-step-thumb{
  width:38px;height:38px;border-radius:50%;
  overflow:hidden;background:#000;display:block;
  border:1px solid var(--scx-border);
  transition:border-color .25s,box-shadow .25s
}
.scx-step-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.scx-step-item.is-picked .scx-step-thumb{border-color:var(--scx-cta)}
.scx-step-item.is-current .scx-step-thumb{
  border-color:var(--scx-accent-bright,#e8c77a);
  box-shadow:0 0 0 2px rgba(201,160,72,.25)
}
.scx-step-btn:hover{background:var(--scx-bg-alt);color:var(--scx-text)}
/* Neutralise les états de focus/active par défaut du navigateur (ou d'Astra) qui flashent en bleu */
body.sc-katana-page .scx-step-btn:focus,
body.sc-katana-page .scx-step-btn:active,
body.sc-katana-page .scx-step-btn:focus-visible{
  background:transparent!important;
  outline:0!important;box-shadow:none!important;
  color:var(--scx-text)!important
}
body.sc-katana-page .scx-step-btn:focus-visible{background:var(--scx-bg-alt)!important}
body.sc-katana-page .scx-step-btn::-moz-focus-inner{border:0;padding:0}
.scx-step-btn::-moz-selection,.scx-step-btn *::-moz-selection{background:transparent}
.scx-step-btn::selection,.scx-step-btn *::selection{background:transparent}
.scx-step-num{
  font-family:var(--scx-font-serif);font-style:italic;font-size:.95em;
  color:var(--scx-text-mute);letter-spacing:.08em
}
.scx-step-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.scx-step-title{
  font-family:var(--scx-font-serif);font-style:italic;font-weight:500;
  color:var(--scx-title);font-size:1.1em;line-height:1.2
}
.scx-step-picked{
  font-size:.86em;color:var(--scx-text-mute);font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.scx-step-check{
  opacity:0;color:var(--scx-cta);font-weight:700;transition:opacity .25s
}
.scx-step-item.is-picked .scx-step-check{opacity:1}
.scx-step-item.is-picked .scx-step-picked{color:var(--scx-accent);opacity:1}
.scx-step-item{position:relative}
.scx-step-item.is-current{
  background:linear-gradient(90deg,rgba(201,160,72,.18) 0%,rgba(201,160,72,.04) 100%);
  box-shadow:inset 0 0 0 1px rgba(201,160,72,.35)
}
.scx-step-item.is-current .scx-step-btn{color:var(--scx-title)}
.scx-step-item.is-current .scx-step-num{
  color:var(--scx-accent-bright,#e8c77a);
  font-weight:600;text-shadow:0 0 8px rgba(232,199,122,.4)
}
.scx-step-item.is-current .scx-step-title{
  color:var(--scx-accent-bright,#e8c77a);font-weight:600;font-size:1.16em
}
.scx-step-item.is-current .scx-step-picked{color:var(--scx-title);opacity:.9}
/* Barre latérale animée (pulse subtile) */
.scx-step-item.is-current::before{
  content:"";position:absolute;top:4px;bottom:4px;left:-2px;width:3px;
  background:linear-gradient(to bottom,transparent 0%,var(--scx-accent) 15%,var(--scx-accent-bright,#e8c77a) 50%,var(--scx-accent) 85%,transparent 100%);
  box-shadow:0 0 8px rgba(201,160,72,.55);
  animation:scx-step-bar 2.4s ease-in-out infinite
}
@keyframes scx-step-bar{
  0%,100%{opacity:.8;transform:scaleY(1)}
  50%   {opacity:1;transform:scaleY(1.02)}
}
@media (prefers-reduced-motion:reduce){
  .scx-step-item.is-current::before{animation:none}
}

/* ============= Mobile customizer (< 960px) =============
   UX circulaires + scroll horizontal, à la Kickflip. Desktop INTACT. */
@media (max-width:960px){
  .scx-app{padding:0 0 24px;height:auto;overflow:visible}
  .scx-layout{display:block;padding:0;gap:0}

  /* ---- Barre horizontale de thumbnails ronds en haut ---- */
  body.sc-katana-page .scx-steps-nav{
    position:sticky;top:0;z-index:10;
    padding:12px 3vw 14px!important;margin:0!important;
    background:var(--scx-bg);
    border-bottom:1px solid var(--scx-border);
    max-height:none;overflow:visible
  }
  .scx-steps-list{
    display:flex;gap:14px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:0!important;margin:0!important;scroll-snap-type:x proximity;
    scrollbar-width:none;list-style:none
  }
  .scx-steps-list::-webkit-scrollbar{display:none}
  .scx-step-item{
    flex:0 0 auto;border:0!important;scroll-snap-align:start;
    background:transparent!important;box-shadow:none!important;min-width:70px;
    padding:0!important;margin:0!important
  }
  .scx-step-item::before{display:none!important}
  .scx-step-btn{
    display:flex!important;flex-direction:column;align-items:center;gap:3px;
    padding:0!important;background:transparent!important;
    border:0!important;border-radius:0!important;min-height:0!important
  }
  .scx-step-btn .scx-step-num{display:none!important}
  .scx-step-btn .scx-step-check{display:none!important}
  .scx-step-btn .scx-step-picked{display:none!important}
  .scx-step-thumb{
    width:42px;height:42px;border-radius:50%;
    background:#000;overflow:hidden;display:block;flex:0 0 auto;
    border:2px solid rgba(255,255,255,.18);
    transition:border-color .25s,transform .25s
  }
  .scx-step-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .scx-step-item.is-picked .scx-step-thumb{border-color:var(--scx-cta)}
  .scx-step-item.is-current .scx-step-thumb{
    border-color:var(--scx-accent-bright,#e8c77a);
    transform:scale(1.08);
    box-shadow:0 0 0 3px rgba(201,160,72,.25)
  }
  .scx-step-btn .scx-step-title,
  .scx-step-btn .scx-step-info{display:flex!important}
  .scx-step-info{flex-direction:column;align-items:center;gap:0;min-width:0}
  .scx-step-btn .scx-step-title{
    font-family:var(--scx-font-body)!important;font-style:normal!important;font-weight:500;
    font-size:.68em!important;color:var(--scx-text-dim);
    text-align:center;line-height:1.15;letter-spacing:0;
    max-width:72px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    display:block!important
  }
  .scx-step-item.is-current .scx-step-btn .scx-step-title{color:var(--scx-title)}
  .scx-step-item.is-current .scx-step-num{display:none!important}

  /* ---- Stage : block normal, preview puis options ---- */
  .scx-stage{display:block!important;padding:0!important;gap:0!important;margin:0!important}
  .scx-stage > *{margin-top:0!important}
  .scx-stage > .scx-preview{
    position:sticky;top:82px;z-index:4;
    padding:0!important;margin:0!important;background:var(--scx-bg);
    border:0;border-bottom:1px solid var(--scx-border);
    display:flex;justify-content:center
  }
  .scx-preview::before{display:none}
  .scx-preview-frame{
    aspect-ratio:1/1;
    width:auto;height:min(38vw,280px);
    max-width:100%;margin:0;min-height:0;
    background:#000;border-radius:4px;position:relative;
    display:flex;align-items:center;justify-content:center
  }
  body.sc-katana-page #scx-preview-img{
    filter:none;
    width:100%!important;height:100%!important;
    object-fit:contain!important;  /* image entière visible, pas de crop */
    max-width:none;max-height:none
  }
  .scx-preview-badge{display:none}

  /* Badge overlay "Encore X étapes à compléter" */
  .scx-preview-frame .scx-progress-overlay{
    position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,.78);backdrop-filter:blur(4px);
    padding:9px 18px;border-radius:20px;
    color:#fff;font-family:var(--scx-font-body);font-size:.88em;font-style:italic;
    letter-spacing:.02em;
    z-index:3;pointer-events:none;white-space:nowrap
  }
  .scx-preview-frame .scx-progress-overlay.is-done{
    background:rgba(46,160,77,.92);border:1px solid rgba(255,255,255,.15)
  }
  .scx-preview-frame .scx-progress-overlay[hidden]{display:none!important}

  /* ---- Panel options : carrousel horizontal ---- */
  .scx-panel{
    max-height:none!important;overflow:visible;padding:4px 3vw 0
  }
  .scx-panel-head{margin:0 0 2px!important;padding:0 0 2px!important}
  .scx-panel-title{font-size:1em!important;margin:0!important;padding:0!important}
  .scx-panel-kicker-row{padding-bottom:2px;margin:0;border:0}
  .scx-panel-kicker{font-size:.58em}
  .scx-panel-hint{display:none}
  .scx-panel-running-value{font-size:.95em}

  .scx-options{
    display:flex!important;grid-template-columns:none!important;
    gap:8px;margin:0;
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding:2px 0 4px!important;
    scroll-padding-left:0;scroll-padding-right:0;
    scrollbar-width:none
  }
  .scx-options::-webkit-scrollbar{display:none}
  .scx-option{
    flex:0 0 28%;scroll-snap-align:start;
    min-width:100px;max-width:130px
  }
  .scx-opt-info{padding:5px 6px 6px}
  .scx-opt-name{font-size:.72em;-webkit-line-clamp:2;line-clamp:2;line-height:1.2}
  .scx-opt-price{font-size:.7em}
  .scx-option.is-picked::after{width:18px;height:18px;font-size:10px;top:4px;right:4px}

  /* Bouton Valider : collé aux options */
  .scx-panel-validate{
    position:static;margin:6px 0 10px!important;padding:0 3vw!important;
    background:transparent;border:0
  }
  .scx-options{padding-bottom:0!important;margin-bottom:0!important}
  .scx-panel{padding-bottom:6px!important}
  .scx-validate-btn{padding:10px 18px;font-size:.85em;letter-spacing:.1em;min-height:42px}

  /* ---- Mobile : pas de footer fixé (prix/progress déjà dans le panel,
     bouton Valider sticky inline dans .scx-panel-validate) ---- */
  .scx-footer{display:none!important}
  .scx-app{padding-bottom:16px}  /* plus besoin d'espace pour footer fixé */
}
/* Très petits écrans */
@media (max-width:420px){
  body.sc-katana-page .scx-option{flex:0 0 46%;min-width:130px;max-width:160px}
  body.sc-katana-page .scx-step-thumb{width:48px;height:48px}
}

/* ============= Stage (preview + panel) ============= */
.scx-stage{
  padding:0 0 24px 28px;
  display:grid;
  grid-template-columns:minmax(420px,1.15fr) minmax(420px,1fr);
  gap:28px;
  align-items:start
}
@media (max-width:1200px){
  .scx-stage{grid-template-columns:1.1fr 1fr;gap:20px}
}
@media (max-width:960px){
  .scx-stage{grid-template-columns:1fr;padding:20px 0 0;gap:18px}
}
.scx-stage > .scx-preview{position:sticky;top:20px}
@media (max-width:960px){
  .scx-stage > .scx-preview{position:static}
}

/* Panel des options : sa propre zone scrollable, le reste de la page ne bouge pas.
   La hauteur est synchronisée avec celle du preview via JS (--scx-match-h). */
.scx-panel{
  max-height:var(--scx-match-h, min(calc(100vh - 100px), 780px));
  overflow-y:auto;overflow-x:hidden;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--scx-accent) transparent
}
.scx-panel::-webkit-scrollbar{width:6px}
.scx-panel::-webkit-scrollbar-track{background:transparent}
.scx-panel::-webkit-scrollbar-thumb{background:var(--scx-accent-soft);border-radius:3px}
.scx-panel::-webkit-scrollbar-thumb:hover{background:var(--scx-accent)}
@media (max-width:960px){
  .scx-panel{max-height:none;overflow-y:visible;padding-right:0}
}

/* Preview */
.scx-preview{
  background:var(--scx-bg-alt);
  border:1px solid var(--scx-border);
  border-radius:2px;
  padding:24px;
  position:relative;
  overflow:hidden
}
.scx-preview::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,transparent 0 22px,rgba(201,160,72,.02) 22px 24px),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5))
}
.scx-preview-frame{
  position:relative;aspect-ratio:1/1;
  width:100%;max-width:min(calc(100vh - 100px), 780px);
  margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  background:#000;border-radius:2px;overflow:hidden
}
#scx-preview-img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.7));
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)
}
#scx-preview-img.is-swapping{opacity:0;transform:scale(.98)}
.scx-preview-badge{
  position:absolute;top:18px;right:18px;
  display:flex;flex-direction:column;gap:2px;align-items:flex-end;
  padding:8px 14px;
  background:rgba(10,10,10,.8);backdrop-filter:blur(8px);
  border:1px solid var(--scx-border-strong);
  border-radius:2px;
  font-size:.88em
}
.scx-preview-badge-label{
  color:var(--scx-accent);letter-spacing:.18em;text-transform:uppercase;
  font-size:.7em;font-style:italic;font-family:var(--scx-font-body)
}
.scx-preview-badge-value{
  color:var(--scx-title);font-family:var(--scx-font-serif);font-style:italic;font-weight:500
}

/* Panel étapes */
.scx-panel{
  background:transparent;padding:0
}
.scx-panel-head{margin:0 0 20px}
.scx-panel-kicker-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 0 6px;padding-bottom:10px;
  border-bottom:1px solid var(--scx-border)
}
.scx-panel-kicker{
  color:var(--scx-accent);letter-spacing:.22em;text-transform:uppercase;
  font-family:var(--scx-font-body);font-style:italic;
  font-size:.72em;opacity:.9
}
.scx-panel-running{
  display:inline-flex;align-items:baseline;gap:8px;
  white-space:nowrap
}
.scx-panel-running-label{
  color:var(--scx-accent);letter-spacing:.2em;text-transform:uppercase;
  font-style:italic;font-size:.68em;opacity:.8
}
.scx-panel-running-value{
  font-family:var(--scx-font-serif);font-style:italic;font-weight:700;
  color:var(--scx-title);font-size:1.35em;line-height:1;
  transition:color .3s
}
.scx-panel-running-value.is-flash{
  animation:scx-running-flash .6s ease
}
@keyframes scx-running-flash{
  0%  {color:var(--scx-accent-bright,#e8c77a);transform:scale(1.08)}
  100%{color:var(--scx-title);transform:scale(1)}
}
.scx-panel-title{
  font-family:var(--scx-font-serif);font-style:italic;font-weight:500;
  color:var(--scx-title);
  font-size:2em;margin:0 0 8px;letter-spacing:.01em;line-height:1.15
}
.scx-panel-hint{
  color:var(--scx-text-dim);font-style:italic;font-size:.98em;margin:0
}

/* Grille options */
.scx-options{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;margin-top:18px
}
@media (max-width:500px){
  .scx-options{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
}
.scx-option{
  position:relative;
  background:var(--scx-bg-alt);
  border:1px solid var(--scx-border);
  border-radius:2px;
  cursor:pointer;
  padding:0;
  text-align:left;font-family:inherit;color:inherit;
  transition:border-color .25s,transform .25s,background .25s;
  outline:0;display:flex;flex-direction:column;overflow:hidden;
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none
}
/* Bloque tout fond bleu iOS / Astra sur :focus, :focus-visible, :active, :hover (touch) */
body.sc-katana-page .scx-option,
body.sc-katana-page .scx-option:focus,
body.sc-katana-page .scx-option:focus-visible,
body.sc-katana-page .scx-option:focus-within,
body.sc-katana-page .scx-option:active{
  background:var(--scx-bg-alt)!important;
  outline:0!important;box-shadow:none!important;
  -webkit-tap-highlight-color:transparent!important;
  color:inherit!important
}
body.sc-katana-page .scx-option.is-picked,
body.sc-katana-page .scx-option.is-picked:focus,
body.sc-katana-page .scx-option.is-picked:focus-visible,
body.sc-katana-page .scx-option.is-picked:active{
  background:rgba(201,160,72,.05)!important
}
body.sc-katana-page .scx-option *,
body.sc-katana-page .scx-option *:focus,
body.sc-katana-page .scx-option *:active{
  -webkit-tap-highlight-color:transparent!important;
  background-color:transparent!important;
  outline:0!important
}
body.sc-katana-page .scx-option .scx-opt-info{background:transparent!important}
body.sc-katana-page .scx-option ::selection{background:transparent!important;color:inherit!important}
body.sc-katana-page .scx-option ::-moz-selection{background:transparent!important;color:inherit!important}
.scx-option:hover,.scx-option:focus-visible{
  border-color:var(--scx-border-strong);transform:translateY(-2px)
}
.scx-option.is-picked{
  border-color:var(--scx-accent);background:rgba(201,160,72,.05)
}
.scx-option.is-picked::after{
  content:"✓";position:absolute;top:8px;right:8px;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:var(--scx-cta);color:#fff;border-radius:50%;
  font-size:13px;font-weight:700
}
.scx-opt-img{
  width:100%;aspect-ratio:1/1;
  background:#000;display:block;
  overflow:hidden;position:relative;flex:0 0 auto
}
.scx-opt-img img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease
}
.scx-option:hover .scx-opt-img img{transform:scale(1.04)}
.scx-opt-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px}
.scx-opt-name{
  font-family:var(--scx-font-serif);font-style:italic;font-size:.95em;
  color:var(--scx-title);font-weight:500;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical
}
.scx-opt-price{
  font-family:var(--scx-font-serif);font-weight:600;
  color:var(--scx-accent);font-size:.88em;letter-spacing:.02em
}
.scx-opt-price.is-zero{color:var(--scx-text-mute);font-weight:500}
.scx-opt-price .scx-opt-extra{opacity:.7;font-size:.9em;margin-left:3px}

/* Bouton "Valider et continuer" — s'affiche sous la grille une fois qu'une option est choisie */
.scx-panel-validate{
  position:sticky;bottom:0;
  margin-top:18px;padding:16px 0 4px;
  background:linear-gradient(to top,var(--scx-bg) 0%,var(--scx-bg) 60%,rgba(10,10,10,0) 100%);
  opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .35s ease,transform .35s ease
}
.scx-panel-validate.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.scx-validate-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(135deg,var(--scx-cta) 0%,#3cc265 50%,var(--scx-cta) 100%);
  background-size:200% 200%;
  color:#fff;
  border:1px solid var(--scx-cta-hover,#3cc265);padding:18px 24px;
  font-family:var(--scx-font-body);font-style:italic;font-size:1.1em;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:transform .2s,box-shadow .3s,filter .2s;
  position:relative;border-radius:0;min-height:56px;
  overflow:hidden;
  box-shadow:0 0 0 0 rgba(46,160,77,.5),0 6px 16px -4px rgba(46,160,77,.35);
  animation:scx-cta-pulse 2.8s ease-in-out infinite,scx-cta-gradient 6s ease infinite
}
/* Coins accent or */
.scx-validate-btn::before,.scx-validate-btn::after{
  content:"";position:absolute;width:12px;height:12px;
  border:2px solid var(--scx-accent);transition:all .25s;z-index:2
}
.scx-validate-btn::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.scx-validate-btn::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
/* Shine sweep : barre oblique lumineuse qui traverse le bouton */
.scx-validate-btn > .scx-validate-shine{
  position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.25) 40%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,.25) 60%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  animation:scx-cta-shine 3.2s ease-in-out infinite;
  pointer-events:none;z-index:1
}
.scx-validate-btn:hover{
  transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:0 0 0 3px rgba(46,160,77,.35),0 10px 24px -6px rgba(46,160,77,.6);
  animation-play-state:paused
}
.scx-validate-btn:hover::before,.scx-validate-btn:hover::after{border-color:#fff}
.scx-validate-btn:active{transform:translateY(0)}
.scx-validate-text,.scx-validate-arrow{position:relative;z-index:2}
.scx-validate-arrow{display:inline-block;font-size:1.3em;transition:transform .2s}
.scx-validate-btn:hover .scx-validate-arrow{transform:translateX(6px)}
@keyframes scx-cta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(46,160,77,.5),0 6px 16px -4px rgba(46,160,77,.35)}
  50%   {box-shadow:0 0 0 6px rgba(46,160,77,0),0 8px 20px -4px rgba(46,160,77,.55)}
}
@keyframes scx-cta-gradient{
  0%,100%{background-position:0% 50%}
  50%   {background-position:100% 50%}
}
@keyframes scx-cta-shine{
  0%   {left:-60%}
  60%  {left:120%}
  100% {left:120%}
}
@media (prefers-reduced-motion: reduce){
  .scx-validate-btn{animation:none}
  .scx-validate-btn > .scx-validate-shine{display:none}
}

/* Text input (gravure) */
.scx-text-input-wrap{
  background:var(--scx-bg-alt);border:1px solid var(--scx-border);
  padding:20px;border-radius:2px
}
.scx-text-input-wrap label{
  display:block;font-family:var(--scx-font-body);font-style:italic;
  color:var(--scx-accent);letter-spacing:.12em;text-transform:uppercase;
  font-size:.8em;margin:0 0 10px
}
.scx-text-input{
  width:100%;background:#000;border:1px solid var(--scx-border-strong);
  color:var(--scx-title);font-family:var(--scx-font-serif);font-style:italic;
  font-size:1.3em;padding:12px 14px;border-radius:0;
  letter-spacing:.04em
}
.scx-text-input:focus{outline:0;border-color:var(--scx-accent)}
.scx-text-counter{color:var(--scx-text-mute);font-size:.82em;margin-top:6px;display:block;text-align:right}

/* Sharpness (label type) */
.scx-sharpness-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:480px}
.scx-sharpness-pair .scx-option{padding:24px 18px;text-align:center;align-items:center;justify-content:center}
.scx-sharpness-pair .scx-opt-img{display:none}
.scx-sharpness-pair .scx-opt-info{padding:0}
.scx-sharpness-pair .scx-opt-name{font-size:1.1em;-webkit-line-clamp:1;line-clamp:1}

/* ============= Footer flottant ============= */
.scx-footer{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(10,10,10,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--scx-border-strong);
  z-index:50;padding:12px 0;
  transform:translateY(0);transition:transform .3s
}
.scx-footer-inner{
  max-width:1720px;margin:0 auto;padding:0 3vw;
  display:grid;grid-template-columns:auto 1fr auto auto auto;gap:16px;align-items:center
}
@media (max-width:720px){
  .scx-footer-inner{grid-template-columns:1fr 1fr;gap:10px;padding:0 4vw}
  .scx-progress{grid-column:1/-1;order:-1}
}

.scx-nav-btn{
  background:transparent;border:1px solid var(--scx-border-strong);
  color:var(--scx-title);padding:10px 18px;cursor:pointer;
  font-family:var(--scx-font-body);font-style:italic;font-size:.98em;letter-spacing:.06em;
  transition:all .2s;border-radius:0;
  min-height:44px
}
.scx-nav-btn:hover:not(:disabled){border-color:var(--scx-accent);color:var(--scx-accent)}
.scx-nav-btn:disabled{opacity:.35;cursor:not-allowed}
@media (max-width:720px){
  .scx-nav-btn{padding:10px 12px;font-size:.9em}
}

.scx-progress{display:flex;flex-direction:column;gap:4px;min-width:0}
.scx-progress-bar{
  height:3px;background:var(--scx-border);overflow:hidden;width:100%
}
.scx-progress-fill{
  display:block;height:100%;background:var(--scx-accent);
  width:0;transition:width .4s cubic-bezier(.2,.8,.2,1)
}
.scx-progress-label{
  color:var(--scx-text-mute);font-size:.82em;letter-spacing:.15em;text-align:center;font-style:italic
}

.scx-price-block{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px
}
.scx-price-label{
  color:var(--scx-accent);letter-spacing:.2em;text-transform:uppercase;
  font-style:italic;font-size:.72em;opacity:.85
}
.scx-price-value{
  font-family:var(--scx-font-serif);font-weight:700;font-style:italic;
  color:var(--scx-title);font-size:1.5em;line-height:1
}
@media (max-width:720px){
  .scx-price-block{align-items:center}
  .scx-price-value{font-size:1.2em}
}

/* CTA final — DOIT respecter l'attribut HTML `hidden` sinon il reste visible tout le temps */
.scx-cta[hidden],.scx-nav-btn[hidden]{display:none!important}
.scx-cta{
  background:transparent;color:var(--scx-title);
  border:1px solid var(--scx-accent);
  padding:14px 28px;font-family:var(--scx-font-body);font-style:italic;
  font-size:1em;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;position:relative;min-height:50px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:all .25s;border-radius:0
}
.scx-cta::before,.scx-cta::after{
  content:"";position:absolute;width:10px;height:10px;
  border:2px solid var(--scx-cta);transition:all .25s
}
.scx-cta::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.scx-cta::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.scx-cta:hover{background:var(--scx-accent);color:#0a0a0a;border-color:var(--scx-accent)}
.scx-cta:hover::before,.scx-cta:hover::after{border-color:#0a0a0a}
.scx-cta:disabled{opacity:.5;cursor:not-allowed}
.scx-cta.is-loading .scx-cta-text{opacity:0}
.scx-cta-spinner{
  display:none;width:18px;height:18px;border:2px solid currentColor;
  border-top-color:transparent;border-radius:50%;
  position:absolute;animation:scx-spin .7s linear infinite
}
.scx-cta.is-loading .scx-cta-spinner{display:inline-block}
@keyframes scx-spin{to{transform:rotate(360deg)}}

/* ============= Summary drawer ============= */
.scx-summary{
  position:fixed;inset:0;z-index:80;
  opacity:0;pointer-events:none;transition:opacity .3s
}
.scx-summary.is-open{opacity:1;pointer-events:auto}
.scx-summary-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.75);
  backdrop-filter:blur(4px)
}
.scx-summary-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(460px,92vw);
  background:var(--scx-bg-alt);border-left:1px solid var(--scx-accent);
  padding:28px 26px 26px;display:flex;flex-direction:column;gap:16px;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto
}
.scx-summary.is-open .scx-summary-panel{transform:translateX(0)}
.scx-summary-head{display:flex;justify-content:space-between;align-items:center;margin:0;padding-bottom:10px;border-bottom:1px solid var(--scx-border)}
.scx-summary-head h2{
  margin:0;font-family:var(--scx-font-serif);font-style:italic;font-weight:500;
  color:var(--scx-title);font-size:1.5em
}
.scx-summary-close{
  background:transparent;border:0;color:var(--scx-title);
  font-size:28px;line-height:1;cursor:pointer;padding:0 4px
}
.scx-summary-close:hover{color:var(--scx-accent)}
.scx-summary-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}
.scx-summary-list li{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--scx-border);align-items:center
}
.scx-summary-list .scx-sum-thumb{
  width:40px;height:40px;object-fit:cover;background:#000;border-radius:2px
}
.scx-summary-list .scx-sum-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.scx-summary-list .scx-sum-step{
  color:var(--scx-text-mute);font-size:.78em;letter-spacing:.1em;text-transform:uppercase;font-style:italic
}
.scx-summary-list .scx-sum-name{
  color:var(--scx-title);font-family:var(--scx-font-serif);font-style:italic;font-size:1em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.scx-summary-list .scx-sum-price{
  color:var(--scx-accent);font-family:var(--scx-font-serif);font-weight:600;font-size:.95em
}
.scx-summary-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:14px 0;border-top:2px solid var(--scx-accent);margin-top:10px
}
.scx-summary-total span{color:var(--scx-accent);letter-spacing:.18em;text-transform:uppercase;font-style:italic;font-size:.85em}
.scx-summary-total strong{
  font-family:var(--scx-font-serif);font-weight:700;font-style:italic;
  color:var(--scx-title);font-size:1.8em
}
.scx-summary-cta{width:100%}

/* ============= Toast ============= */
.scx-toast{
  position:fixed;top:20px;left:50%;transform:translate(-50%,-20px);
  background:var(--scx-bg-alt);border:1px solid var(--scx-accent);
  color:var(--scx-title);padding:14px 22px;border-radius:2px;
  font-family:var(--scx-font-serif);font-style:italic;font-size:1em;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  z-index:100;max-width:80vw;text-align:center
}
.scx-toast.is-show{opacity:1;transform:translate(-50%,0)}
.scx-toast.is-error{border-color:#c94848}

.scx-noscript{
  padding:32px;text-align:center;color:#c94848;font-style:italic;font-size:1.1em;
  border:1px solid rgba(201,72,72,.5);background:rgba(201,72,72,.08)
}

/* ============= Section "Notre processus" ============= */
body.sc-katana-page .scx-process{
  background:var(--scx-bg);
  padding:60px 3vw 50px;
  max-width:1720px;margin:0 auto
}
body.sc-katana-page .scx-process-inner{max-width:1200px;margin:0 auto}
body.sc-katana-page .scx-process-head{text-align:center;margin:0 0 48px}
body.sc-katana-page .scx-process-kicker{
  display:block;color:var(--scx-accent);letter-spacing:.32em;text-transform:uppercase;
  font-family:var(--scx-font-body);font-style:italic;
  font-size:.78em;margin:0 0 14px;opacity:.9
}
body.sc-katana-page .scx-process-title{
  font-family:'Cinzel',Georgia,serif;font-weight:600;
  color:var(--scx-title);font-size:clamp(1.8em,3.6vw,2.6em);
  letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 14px;line-height:1.15
}
body.sc-katana-page .scx-process .scx-divider{
  width:60px;height:1px;border:0;background:var(--scx-accent);margin:14px auto 20px;opacity:.7
}
body.sc-katana-page .scx-process-sub{
  color:var(--scx-text-dim);font-style:italic;font-size:1.05em;
  max-width:640px;margin:0 auto
}
body.sc-katana-page .scx-process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px
}
@media (max-width:800px){
  /* Carrousel swipeable : 1 card centrée + peek de la suivante */
  body.sc-katana-page .scx-process-grid{
    display:flex;grid-template-columns:none;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 4vw 12px;
    margin:0 -4vw;
    scrollbar-width:none
  }
  body.sc-katana-page .scx-process-grid::-webkit-scrollbar{display:none}
  body.sc-katana-page .scx-process-step{
    flex:0 0 78%;
    scroll-snap-align:center;
    scroll-snap-stop:always
  }
  body.sc-katana-page .scx-process-step:last-child{margin-right:4vw}
}
body.sc-katana-page .scx-process-step{
  position:relative;
  background:var(--scx-bg-alt);
  border:1px solid var(--scx-border);
  text-align:center;
  transition:border-color .3s,transform .3s;
  overflow:hidden
}
body.sc-katana-page .scx-process-step:hover{
  border-color:var(--scx-border-strong);transform:translateY(-3px)
}
body.sc-katana-page .scx-process-step::before{
  content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;
  border-top:2px solid var(--scx-accent);border-left:2px solid var(--scx-accent);z-index:3
}
body.sc-katana-page .scx-process-step::after{
  content:"";position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;
  border-bottom:2px solid var(--scx-accent);border-right:2px solid var(--scx-accent);z-index:3
}
/* Vidéo en tête de card */
body.sc-katana-page .scx-process-video-wrap{
  position:relative;aspect-ratio:4/5;background:#000;overflow:hidden
}
body.sc-katana-page .scx-process-video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease
}
body.sc-katana-page .scx-process-step:hover .scx-process-video{transform:scale(1.04)}
body.sc-katana-page .scx-process-video-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,10,0) 50%,rgba(10,10,10,.85) 100%)
}
body.sc-katana-page .scx-process-num{
  position:absolute;bottom:14px;left:18px;z-index:2;
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;
  color:var(--scx-accent);
  font-size:3em;line-height:1;letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.75)
}
/* Texte sous la vidéo */
body.sc-katana-page .scx-process-step .scx-process-step-title{padding:22px 24px 0}
body.sc-katana-page .scx-process-step .scx-process-desc{padding:0 24px 26px}
body.sc-katana-page .scx-process-step-title{
  font-family:'Cinzel',Georgia,serif;font-weight:600;
  color:var(--scx-title);font-size:1.3em;
  letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 14px
}
body.sc-katana-page .scx-process-desc{
  color:var(--scx-text);font-style:italic;font-size:1.02em;line-height:1.6;margin:0
}

/* ============= Reviews section (réutilise sc-reviews.css) ============= */
body.sc-katana-page .scx-reviews-section{
  background:var(--scx-bg);
  padding:60px 3vw 40px;
  max-width:1720px;margin:0 auto
}
body.sc-katana-page .scr-section-inner{max-width:1200px;margin:0 auto}
body.sc-katana-page .scr-section-title{
  font-family:var(--scx-font-serif);font-style:italic;
  color:var(--scx-title);text-align:center;font-size:2.4em;margin:0 0 10px
}
body.sc-katana-page .scr-section-header{text-align:center!important}
body.sc-katana-page .scr-section-header .sc-gold-divider,
body.sc-katana-page .sc-gold-divider{
  width:60px!important;height:1px!important;border:0!important;
  background:var(--scx-accent)!important;
  margin:16px auto 28px!important;
  display:block!important;opacity:.7
}
/* S'assure que la section reviews ne passe pas sous le footer fixed */
body.sc-katana-page .scx-reviews-section:last-child{padding-bottom:140px}

/* ============= Entrée / transitions ============= */
.scx-panel{animation:scx-panel-in .35s ease}
@keyframes scx-panel-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}