/* ============================================================
   ScafJack : page Pièces SM-3
   Direction « Scafjack Chantier Moderne » : marine #06356f, or #ffac24, Poppins
   Même en-tête et même pied de page que l'accueil (classes sj-)
   ============================================================ */

body.sj-page-pieces{margin:0;background:#f6f8fc}

/* ---- Base Scafjack (identique à l'accueil) ---- */
.sj{--sj-navy:#06356f;--sj-navy-2:#0a4a99;--sj-navy-mid:#052c5d;--sj-navy-deep:#021a38;--sj-gold:#ffac24;--sj-gold-2:#ffc45e;--sj-gold-dark:#e8950a;--sj-paper:#f6f8fc;--sj-paper2:#eaeff8;--sj-ink:#10203a;--sj-muted:rgba(16,32,58,.7);--sj-line:rgba(6,53,111,.12);--sj-ease:cubic-bezier(.2,.8,.2,1);font-family:'Poppins',system-ui,sans-serif;color:var(--sj-ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.sj,.sj *,.sj *::before,.sj *::after{box-sizing:border-box;margin:0;padding:0}
.sj,.sj *{opacity:1!important;visibility:visible!important}
.sj section,.sj main,.sj header,.sj footer{display:block}
.sj h1,.sj h2,.sj h3{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--sj-navy)}
.sj a{text-decoration:none!important}
.sj img{max-width:100%;height:auto;border:none;display:block}
.sj ul{list-style:none}
.sj button,.sj input{font-family:'Poppins',sans-serif}
.sj [hidden]{display:none!important}
.sj .sj-wrap{width:min(1180px,92vw);margin:0 auto}
.sj .sj-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sj :focus-visible{outline:3px solid var(--sj-gold);outline-offset:2px;border-radius:10px}

.sj .sj-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:.97rem;line-height:1.2;background:var(--sj-gold);color:var(--sj-navy)!important;padding:.9rem 1.7rem;border:none;border-radius:999px;cursor:pointer;box-shadow:0 4px 16px rgba(255,172,36,.35);transition:transform .3s var(--sj-ease),box-shadow .3s var(--sj-ease),background .3s,color .3s;text-transform:none;letter-spacing:0}
.sj .sj-btn::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.sj .sj-btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(255,172,36,.5);background:var(--sj-gold)}
.sj .sj-btn:hover::after{left:130%}
.sj .sj-btn:active{transform:translateY(0) scale(.98)}
.sj .sj-btn svg{flex:0 0 auto}
.sj .sj-ghost{background:rgba(255,255,255,.08);color:#fff!important;border:1.5px solid rgba(255,255,255,.35);box-shadow:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sj .sj-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);box-shadow:0 10px 24px rgba(2,26,56,.35)}

@media(prefers-reduced-motion:reduce){.sj *{transition:none!important;animation:none!important}}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--wp-admin--admin-bar--height,0px) + var(--sj-entete,80px) + 12px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- En-tête (même look que l'accueil) ---- */
.sj .sj-header{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:9990;background:rgba(6,53,111,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,172,36,.35)}
.sj .sj-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.sj .sj-brand{display:inline-flex;align-items:center;flex-shrink:0;transition:transform .3s var(--sj-ease)}
.sj .sj-header .sj-brand img{height:50px;width:auto;max-width:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.sj .sj-brand:hover{transform:scale(1.05)}
.sj .sj-navlinks{display:flex;gap:1.9rem;align-items:center;margin-left:auto}
.sj .sj-navlinks a{color:rgba(255,255,255,.85)!important;font-size:.92rem;font-weight:500;position:relative;padding:.2rem 0;transition:color .25s}
.sj .sj-navlinks a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;border-radius:2px;background:var(--sj-gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--sj-ease)}
.sj .sj-navlinks a:hover,.sj .sj-navlinks a.sj-on{color:#fff!important}
.sj .sj-navlinks a:hover::after,.sj .sj-navlinks a.sj-on::after{transform:scaleX(1)}
.sj .sj-navtools{display:flex;align-items:center;gap:.7rem;margin-left:1.4rem}
.sj .sj-navcall{padding:.55rem 1.15rem;font-size:.88rem;white-space:nowrap}
.sj .sj-lang{display:inline-flex;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:2px;overflow:hidden}
.sj .sj-lang button{font-size:.75rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.75);background:transparent;border:none;border-radius:999px;padding:.42rem .72rem;cursor:pointer;transition:background .25s,color .25s;min-height:34px;line-height:1}
.sj .sj-lang button:hover{background:var(--sj-gold)!important;color:var(--sj-navy)!important}
.sj .sj-lang button.sj-on{background:var(--sj-gold);color:var(--sj-navy)}
@media(max-width:980px){.sj .sj-navlinks{gap:1.3rem}.sj .sj-navlinks a{font-size:.86rem}.sj .sj-navtools{margin-left:1rem}}
@media(max-width:860px){.sj .sj-navlinks{display:none}.sj .sj-navtools{margin-left:auto}}
@media(max-width:520px){
  .sj .sj-nav{flex-wrap:wrap;justify-content:center;gap:.6rem;padding:.7rem 0}
  .sj .sj-brand{flex:0 0 100%;justify-content:center}
  .sj .sj-header .sj-brand img{height:40px;margin:0 auto}
  .sj .sj-navtools{margin:0;gap:.5rem}
  .sj .sj-navcall{padding:.5rem .85rem;font-size:.8rem}
}
@media(max-width:600px){html{scroll-padding-top:calc(var(--sj-entete,116px) + 12px)}.sj .sj-header{top:0}}

/* ---- Héros compact ---- */
.sj .sj-ph{position:relative;overflow:clip;color:#fff;background:linear-gradient(135deg,#06356f,#052c5d 55%,#021a38);padding:2.1rem 0 2.4rem}
.sj .sj-ph::before{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at 82% 30%,rgba(255,172,36,.2),transparent 60%);pointer-events:none}
.sj .sj-ph-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:2rem;align-items:center}
.sj .sj-crumb{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:rgba(255,255,255,.62);margin-bottom:.9rem}
.sj .sj-crumb a{color:rgba(255,255,255,.82)!important;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.sj .sj-crumb a:hover{color:#fff!important;border-color:var(--sj-gold)}
.sj .sj-ph h1{color:#fff;font-size:clamp(2rem,4.2vw,3.05rem);line-height:1.08;font-weight:800}
.sj .sj-ph h1 .sj-or{color:var(--sj-gold);letter-spacing:.01em;white-space:nowrap}
.sj .sj-ph-txt>p{margin-top:.85rem;max-width:36rem;font-size:1.02rem;font-weight:300;color:rgba(255,255,255,.84)}
.sj .sj-stats{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.sj .sj-stats li{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 1.1rem;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);transition:transform .3s var(--sj-ease),border-color .3s,background .3s}
.sj .sj-stats li:hover{transform:translateY(-3px);border-color:rgba(255,172,36,.55);background:rgba(255,255,255,.1)}
.sj .sj-stats b{font-size:1.35rem;font-weight:700;line-height:1.1;letter-spacing:.02em;color:#fff;font-variant-numeric:lining-nums}
.sj .sj-stats span{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.sj .sj-ph-visu{position:relative;align-self:stretch;min-height:260px;margin:-2.1rem 0 -2.4rem}
.sj .sj-ph-visu::before{content:"";position:absolute;left:50%;top:44%;width:320px;height:320px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,172,36,.32),rgba(255,172,36,0) 68%);pointer-events:none}
.sj .sj-ph-visu img{position:absolute;left:50%;top:1.2rem;width:auto;height:205%;max-width:none;transform:translateX(-50%) rotate(-4deg);transform-origin:50% 0;filter:drop-shadow(0 18px 30px rgba(2,26,56,.55))}
@media(max-width:860px){
  .sj .sj-ph{padding:1.5rem 0 1.8rem}
  .sj .sj-ph-grid{grid-template-columns:1fr}
  .sj .sj-ph-visu{display:none}
}
@media(max-width:520px){
  .sj .sj-ph h1{font-size:1.85rem}
  .sj .sj-ph-txt>p{font-size:.95rem}
  .sj .sj-stats{gap:.5rem}
  .sj .sj-stats li{padding:.55rem .8rem;flex:1 1 0;min-width:0}
  .sj .sj-stats b{font-size:1.1rem}
  .sj .sj-stats span{font-size:.58rem;letter-spacing:.1em}
}

/* ---- Barre d'outils du catalogue ---- */
.sj .sj-cat{background:var(--sj-paper);padding:1.8rem 0 3.6rem}
.sj .sj-tool{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.3rem}
.sj .sj-tool-info{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.sj .sj-tool-info b{font-size:1.2rem;font-weight:700;color:var(--sj-navy);letter-spacing:.01em}
.sj .sj-tool-info span{font-size:.85rem;color:var(--sj-muted)}
.sj .sj-find{position:relative;flex:0 1 380px;min-width:240px}
.sj .sj-find svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--sj-navy);pointer-events:none}
.sj .sj-find input{width:100%;height:48px;border:1.5px solid var(--sj-line);border-radius:999px;background:#fff;padding:0 1.1rem 0 2.8rem;font-size:.92rem;color:var(--sj-ink);box-shadow:0 4px 14px rgba(6,53,111,.06);transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.sj .sj-find input::placeholder{color:rgba(16,32,58,.55)}
.sj .sj-find input:hover{border-color:rgba(6,53,111,.3)}
.sj .sj-find input:focus{outline:none;border-color:var(--sj-gold);box-shadow:0 0 0 3px rgba(255,172,36,.28)}
.sj .sj-livraison{margin:-.3rem 0 1.3rem;font-size:.88rem;color:var(--sj-muted)}
@media(max-width:560px){.sj .sj-find{flex:1 1 100%}.sj .sj-cat{padding-top:1.3rem}}

/* ---- Cartes des pièces ---- */
.sj .sj-pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:1.25rem}
.sj .sj-pc{position:relative;display:grid;grid-row:span 3;grid-template-rows:auto 1fr auto;grid-template-rows:subgrid;row-gap:.85rem;background:#fff;border:1px solid var(--sj-line);border-radius:18px;padding:.75rem .75rem 1rem;box-shadow:0 6px 18px rgba(6,53,111,.05);transition:transform .35s var(--sj-ease),box-shadow .35s var(--sj-ease),border-color .35s;scroll-margin-top:12px}
.sj .sj-pc:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(6,53,111,.13);border-color:rgba(6,53,111,.2)}
.sj .sj-pc:target{border-color:var(--sj-gold);box-shadow:0 0 0 3px rgba(255,172,36,.35),0 22px 44px rgba(6,53,111,.13)}
.sj .sj-pc-img{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1;border:none;border-radius:13px;background:radial-gradient(circle at 50% 42%,#ffffff 0%,#f6f8fc 55%,#eaeff8 100%);cursor:zoom-in;overflow:clip;padding:0}
.sj .sj-pc-img img{width:86%;height:86%;object-fit:contain;transition:transform .6s var(--sj-ease)}
.sj .sj-pc:hover .sj-pc-img img{transform:scale(1.06)}
.sj .sj-pc-zoom{position:absolute;right:.6rem;bottom:.6rem;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#fff;color:var(--sj-navy);box-shadow:0 4px 12px rgba(6,53,111,.16);transform:translateY(4px);transition:transform .3s var(--sj-ease),background .3s,color .3s}
.sj .sj-pc-img:hover .sj-pc-zoom,.sj .sj-pc-img:focus-visible .sj-pc-zoom{transform:translateY(0);background:var(--sj-gold)}
.sj .sj-pc-vide{cursor:default;color:var(--sj-muted);font-size:.8rem;font-weight:500}
.sj .sj-pc-body{padding:0 .35rem}
.sj .sj-pc-nom{font-size:1.02rem;font-weight:700;line-height:1.25;letter-spacing:-.005em;color:var(--sj-navy);text-wrap:balance}
.sj .sj-pc-ref{margin-top:.3rem;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-muted)}
.sj .sj-pc-buy{display:flex;flex-direction:column;gap:.75rem;padding:0 .35rem}
.sj .sj-pc-ligne{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sj .sj-pc-prix{font-size:1.6rem;font-weight:800;line-height:1;letter-spacing:.01em;color:var(--sj-navy);font-variant-numeric:lining-nums;white-space:nowrap}
.sj .sj-pc-prix-m{display:none}
.sj .sj-dollar{font-size:.62em;font-weight:600;letter-spacing:0;color:var(--sj-navy);margin-inline:.04em}
.sj .sj-step{display:inline-flex;align-items:center;border:1.5px solid var(--sj-line);border-radius:999px;background:#fff;padding:3px;transition:border-color .25s}
.sj .sj-step:focus-within{border-color:var(--sj-gold)}
.sj .sj-step-b{display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:999px;background:var(--sj-paper2);color:var(--sj-navy);cursor:pointer;padding:0;transition:background .25s,transform .2s}
.sj .sj-step-b:hover{background:var(--sj-gold)}
.sj .sj-step-b:active{transform:scale(.92)}
.sj .sj-step-in{width:38px;height:32px;border:none;background:transparent;text-align:center;font-size:1rem;font-weight:700;color:var(--sj-navy);-moz-appearance:textfield;appearance:textfield;padding:0;box-shadow:none}
@media(pointer:coarse){.sj .sj-step-b{width:40px;height:40px}.sj .sj-step-in{width:34px;height:40px}}
.sj .sj-step-in::-webkit-outer-spin-button,.sj .sj-step-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sj .sj-step-in:focus{outline:none}
@keyframes sj-roule{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.sj .sj-vide{margin-top:1rem;padding:2.2rem 1.5rem;border:1.5px dashed var(--sj-line);border-radius:18px;background:#fff;text-align:center;color:var(--sj-muted)}
.sj .sj-vide b{color:var(--sj-navy);font-size:1.05rem}
.sj .sj-vide a{color:var(--sj-navy)!important;font-weight:700;border-bottom:1.5px solid var(--sj-gold)}

/* Cellulaire : cartes horizontales, plus faciles à parcourir */
@media(max-width:560px){
  .sj .sj-pc-grid{grid-template-columns:1fr;gap:.8rem}
  .sj .sj-pc{grid-row:auto;grid-template-rows:none;grid-template-columns:108px minmax(0,1fr);grid-template-areas:"img body" "buy buy";column-gap:.9rem;row-gap:.8rem;padding:.65rem .65rem .8rem}
  .sj .sj-pc-img{grid-area:img}
  .sj .sj-pc-body{grid-area:body;align-self:center;padding:0}
  .sj .sj-pc-buy{grid-area:buy;padding:0;flex-direction:row;align-items:center;gap:.55rem}
  .sj .sj-pc-ligne{flex:0 0 auto}
  .sj .sj-pc-ligne .sj-pc-prix{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sj .sj-pc-prix-m{display:block;margin-top:.45rem;font-size:1.35rem}
    .sj .sj-pc-zoom{width:28px;height:28px;right:.35rem;bottom:.35rem}
  .sj .sj-pc-zoom svg{width:15px;height:15px}
  .sj .sj-pc:hover{transform:none}
}

/* ---- Aide ---- */
.sj .sj-aide{background:var(--sj-paper);padding:0 0 3.8rem}
.sj .sj-aide-box{position:relative;overflow:clip;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.5rem 2.5rem;align-items:center;border-radius:22px;padding:clamp(1.6rem,3.5vw,2.6rem);background:linear-gradient(150deg,#06356f,#021a38);color:#fff;box-shadow:0 22px 48px rgba(2,26,56,.25)}
.sj .sj-aide-box::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at 95% 0%,rgba(255,172,36,.2),transparent 60%);pointer-events:none}
.sj .sj-aide-txt,.sj .sj-aide-actions{position:relative}
.sj .sj-aide h2{color:#fff;font-size:clamp(1.45rem,2.8vw,2rem)}
.sj .sj-aide-txt p{margin-top:.6rem;color:rgba(255,255,255,.8);max-width:32rem}
.sj .sj-aide-lien{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.9rem;font-weight:600;color:#fff!important;border-bottom:1.5px solid var(--sj-gold);padding-bottom:.1rem;transition:color .25s,gap .25s}
.sj .sj-aide-lien:hover{color:var(--sj-gold)!important;gap:.65rem}
.sj .sj-aide-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.sj .sj-big-call{display:inline-block;font-weight:800;font-size:clamp(1.8rem,3.6vw,2.4rem);letter-spacing:.01em;line-height:1.1;color:var(--sj-gold)!important;transition:transform .3s var(--sj-ease),text-shadow .3s;font-variant-numeric:lining-nums}
.sj .sj-big-call:hover{transform:scale(1.04);text-shadow:0 0 26px rgba(255,172,36,.55)}
.sj .sj-aide-mail{color:rgba(255,255,255,.85)!important;font-weight:500;border-bottom:1.5px solid rgba(255,172,36,.6);margin-bottom:.6rem;transition:color .25s}
.sj .sj-aide-mail:hover{color:#fff!important}
@media(max-width:760px){.sj .sj-aide-box{grid-template-columns:1fr}}

/* ---- Pied de page (identique à l'accueil) ---- */
.sj .sj-footer{position:relative;background:var(--sj-navy-deep);color:rgba(255,255,255,.72);padding:2.6rem 0 2.2rem}
.sj .sj-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sj-gold),var(--sj-navy-2),var(--sj-gold))}
.sj .sj-foot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.sj .sj-footer .sj-brand img{height:43px;width:auto;max-width:100%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.sj .sj-foot p{font-size:.8rem;color:rgba(255,255,255,.6)}
.sj .sj-foot .sj-foot-sous{margin-top:.6rem}
.sj .sj-made{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.75)}
.sj .sj-leaf{color:var(--sj-gold);font-size:1rem}
.sj .sj-credit{width:min(1180px,92vw);margin:1.4rem auto 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:.75rem;color:rgba(255,255,255,.55)}
.sj .sj-credit a{color:var(--sj-gold)!important;font-weight:600;transition:color .25s}
.sj .sj-credit a:hover{color:var(--sj-gold-2)!important}

/* ---- Agrandissement d'une pièce ---- */
.sj .sj-zoom{border:none;padding:0;margin:auto;background:transparent;max-width:min(760px,94vw);width:100%;max-height:92dvh;overflow:visible;color:var(--sj-ink)}
.sj .sj-zoom::backdrop{background:rgba(2,26,56,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sj .sj-zoom[open]{animation:sj-apparait .35s var(--sj-ease)}
@keyframes sj-apparait{from{opacity:.001;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sj .sj-zoom-in{position:relative;background:#fff;border-radius:22px;overflow:clip;box-shadow:0 30px 70px rgba(2,26,56,.45);display:flex;flex-direction:column;max-height:92dvh}
.sj .sj-zoom-img{background:radial-gradient(circle at 50% 42%,#ffffff 0%,#f6f8fc 55%,#eaeff8 100%);display:grid;place-items:center;padding:clamp(1rem,4vw,2.5rem);min-height:0;flex:1 1 auto}
.sj .sj-zoom-img img{width:100%;height:auto;max-height:62dvh;object-fit:contain}
.sj .sj-zoom-bas{display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;padding:1.1rem 1.4rem 1.3rem;border-top:1px solid var(--sj-line)}
.sj .sj-zoom-bas>div{flex:1 1 220px;min-width:0}
.sj .sj-zoom-bas h2{font-size:1.25rem}
.sj .sj-zoom-ref{margin-top:.2rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-muted)}
.sj .sj-zoom-prix{font-size:1.7rem;font-weight:800;letter-spacing:.01em;color:var(--sj-navy);white-space:nowrap}
.sj .sj-zoom-x{position:absolute;top:.8rem;right:.8rem;z-index:2;display:grid;place-items:center;width:42px;height:42px;border:none;border-radius:999px;background:#fff;color:var(--sj-navy);box-shadow:0 4px 14px rgba(6,53,111,.18);cursor:pointer;transition:background .25s,transform .3s var(--sj-ease)}
.sj .sj-zoom-x:hover{background:var(--sj-gold);transform:rotate(90deg)}

/* ---- Choix d'une pièce (case à cocher en forme de bouton) ---- */
.sj .sj-choix{position:relative;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;padding:.5rem .75rem;border-radius:999px;border:1.5px solid rgba(6,53,111,.28);background:#fff;color:var(--sj-navy);font-size:.84rem;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;user-select:none;transition:background .25s,border-color .25s,color .25s,transform .2s,box-shadow .25s}
.sj .sj-choix:hover{border-color:var(--sj-navy);box-shadow:0 6px 16px rgba(6,53,111,.12)}
.sj .sj-choix:active{transform:scale(.98)}
.sj .sj-choix-in{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sj .sj-choix-box{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:2px solid currentColor;color:var(--sj-navy);transition:background .25s,border-color .25s}
.sj .sj-choix-box svg{width:14px;height:14px;transform:scale(0);transition:transform .25s var(--sj-ease)}
.sj .sj-choix-in:focus-visible~.sj-choix-box{outline:3px solid var(--sj-gold);outline-offset:3px}
.sj .sj-choix-in:checked~.sj-choix-box{background:var(--sj-gold);border-color:var(--sj-gold);color:var(--sj-navy)}
.sj .sj-choix-in:checked~.sj-choix-box svg{transform:scale(1)}
.sj .sj-pc.sj-choisie .sj-choix{background:var(--sj-navy);border-color:var(--sj-navy);color:#fff}
.sj .sj-pc.sj-choisie{border-color:var(--sj-gold);box-shadow:0 0 0 2px rgba(255,172,36,.55),0 16px 36px rgba(6,53,111,.12)}
.sj .sj-pc-coche{position:absolute;left:.6rem;top:.6rem;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--sj-gold);color:var(--sj-navy);box-shadow:0 4px 12px rgba(255,172,36,.45);transform:scale(0);transition:transform .3s var(--sj-ease)}
.sj .sj-pc.sj-choisie .sj-pc-coche{transform:scale(1)}
.sj .sj-pc.sj-eclaire{animation:sj-eclaire 1.6s var(--sj-ease)}
@keyframes sj-eclaire{0%,100%{box-shadow:0 6px 18px rgba(6,53,111,.05)}30%{box-shadow:0 0 0 6px rgba(255,172,36,.45),0 16px 36px rgba(6,53,111,.12)}}

/* ---- Barre de sélection (bas de l'écran) ---- */
.sj .sj-barre{position:fixed;left:0;right:0;bottom:0;z-index:9980;background:rgba(2,26,56,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:2px solid var(--sj-gold);box-shadow:0 -12px 30px rgba(2,26,56,.3);padding:.7rem 0;padding-bottom:max(.7rem,env(safe-area-inset-bottom));animation:sj-barre .35s var(--sj-ease)}
@keyframes sj-barre{from{transform:translateY(100%)}to{transform:none}}
.sj .sj-barre-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sj .sj-barre-txt{display:flex;align-items:baseline;gap:.4rem .9rem;flex-wrap:wrap;min-width:0;color:rgba(255,255,255,.78);font-size:.9rem}
.sj .sj-barre-txt b{color:#fff;font-size:1.05rem;font-weight:700}
.sj .sj-barre-txt span span{color:var(--sj-gold);font-weight:700;letter-spacing:.01em}
.sj .sj-barre .sj-btn{flex:0 0 auto;padding:.75rem 1.3rem;font-size:.92rem;white-space:nowrap}
body.sj-page-pieces:has(.sj-barre:not([hidden])) .sj-footer{padding-bottom:5.5rem}
@media(max-width:560px){.sj .sj-choix{flex:1 1 0;min-width:0;white-space:normal;text-align:left;text-wrap:balance}}
@media(max-width:400px){.sj .sj-choix{font-size:.78rem;padding:.45rem .6rem;gap:.35rem}.sj .sj-choix-box{width:20px;height:20px}}
@media(max-width:560px){.sj .sj-barre-txt{font-size:.8rem;flex-direction:column;gap:0}.sj .sj-barre .sj-btn{padding:.7rem 1rem;font-size:.86rem}}
@media(max-width:400px){.sj .sj-barre-in{gap:.75rem}.sj .sj-barre .sj-btn{padding:.7rem .95rem;font-size:.84rem}.sj .sj-barre .sj-btn svg{display:none}.sj .sj-barre-txt{font-size:.76rem}.sj .sj-barre-txt b{font-size:.95rem}}
@media(max-width:380px){.sj .sj-barre-in{flex-wrap:wrap;gap:.45rem}.sj .sj-barre-txt{flex-direction:row;column-gap:.5rem}.sj .sj-barre .sj-btn{flex:1 1 100%}body.sj-page-pieces:has(.sj-barre:not([hidden])) .sj-footer{padding-bottom:7.5rem}}

/* ---- Demande ---- */
.sj .sj-dem{background:var(--sj-paper);padding:0 0 3.4rem;scroll-margin-top:0}
.sj .sj-dem-tete{max-width:46rem;margin-bottom:1.4rem}
.sj .sj-dem-tete h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.sj .sj-dem-tete p{margin-top:.55rem;color:var(--sj-muted);font-size:1rem}
.sj .sj-dem-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.4rem;align-items:start}
.sj .sj-recap{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + var(--sj-entete,80px) + 16px);background:linear-gradient(150deg,#06356f,#021a38);color:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 18px 40px rgba(2,26,56,.25)}
.sj .sj-recap h3{display:flex;align-items:center;gap:.6rem;color:#fff;font-size:1.15rem;margin-bottom:.9rem}
.sj .sj-recap-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,172,36,.16);color:var(--sj-gold)}
.sj .sj-recap-liste{display:flex;flex-direction:column}
.sj .sj-recap-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.7rem;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.sj .sj-recap-nom{font-size:.9rem;font-weight:500;line-height:1.3;color:#fff}
.sj .sj-recap-nom small{display:block;font-size:.72rem;color:rgba(255,255,255,.6);font-weight:400}
.sj .sj-recap-montant{font-size:.95rem;font-weight:700;white-space:nowrap;letter-spacing:.01em;text-align:right}
.sj .sj-recap-montant small{display:block;font-size:.7rem;font-weight:500;color:rgba(255,255,255,.6)}
.sj .sj-recap-x{display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;padding:0;transition:background .25s}
.sj .sj-recap-x:hover{background:rgba(255,172,36,.35)}
.sj .sj-recap-x svg{width:14px;height:14px}
.sj .sj-recap-vide{font-size:.9rem;color:rgba(255,255,255,.75);padding:.4rem 0 .2rem}
.sj .sj-recap-totaux{margin-top:.9rem;display:flex;flex-direction:column;gap:.35rem}
.sj .sj-recap-totaux div{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:rgba(255,255,255,.75)}
.sj .sj-recap-totaux div:first-child{font-size:1rem;color:#fff}
.sj .sj-recap-totaux dd{font-weight:700;text-align:right;letter-spacing:.01em}
.sj .sj-recap-totaux div:first-child dd{color:var(--sj-gold);font-size:1.25rem}
.sj .sj-recap-lien{display:inline-block;margin-top:1rem;font-size:.85rem;font-weight:600;color:#fff!important;border-bottom:1.5px solid rgba(255,172,36,.6);transition:color .25s}
.sj .sj-recap-lien:hover{color:var(--sj-gold)!important}

.sj .sj-form{background:#fff;border:1px solid var(--sj-line);border-radius:20px;padding:clamp(1.2rem,3vw,1.9rem);box-shadow:0 10px 28px rgba(6,53,111,.07);display:flex;flex-direction:column;gap:1rem}
.sj .sj-oblig{font-size:.8rem;color:var(--sj-muted)}
.sj .sj-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sj .sj-champ{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.sj .sj-champ label{font-size:.85rem;font-weight:600;color:var(--sj-navy)}
.sj .sj-etoile{color:var(--sj-gold-dark)}
.sj .sj-opt{font-weight:400;color:var(--sj-muted);font-size:.78rem}
.sj .sj-in{width:100%;min-height:48px;border:1.5px solid rgba(6,53,111,.22);border-radius:12px;padding:.7rem .9rem;font-family:'Poppins',sans-serif;font-size:1rem;color:var(--sj-ink);background:#fff;transition:border-color .25s,box-shadow .25s;box-shadow:none}
.sj .sj-in:hover{border-color:rgba(6,53,111,.4)}
.sj .sj-in:focus{outline:none;border-color:var(--sj-gold);box-shadow:0 0 0 3px rgba(255,172,36,.28)}
.sj textarea.sj-in{resize:vertical;min-height:96px}
.sj select.sj-in{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2306356f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
.sj .sj-err{display:none;font-size:.8rem;font-weight:500;color:#10203a}
.sj .sj-err::before{content:"!";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:.4rem;border-radius:999px;background:var(--sj-gold-dark);color:#fff;font-size:.7rem;font-weight:800}
.sj .sj-in:user-invalid,.sj .sj-in[aria-invalid="true"]{border-color:var(--sj-gold-dark);background:rgba(255,172,36,.08)}
.sj .sj-in:user-invalid+.sj-err,.sj .sj-in[aria-invalid="true"]+.sj-err{display:block}
.sj .sj-groupe{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.sj .sj-groupe legend{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sj-gold-dark);margin-bottom:.2rem;padding:0}
.sj .sj-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.sj .sj-alerte{border-radius:12px;border:1.5px solid var(--sj-gold-dark);background:rgba(255,172,36,.1);padding:.8rem 1rem;font-size:.9rem;font-weight:500;color:var(--sj-ink)}
.sj .sj-alerte ul{display:flex;flex-direction:column;gap:.2rem}
.sj .sj-alerte li::before{content:"! ";font-weight:800;color:var(--sj-gold-dark)}
.sj .sj-envoi{display:flex;align-items:center;gap:.8rem 1.2rem;flex-wrap:wrap;margin-top:.3rem}
.sj .sj-envoi .sj-btn{min-height:52px;padding:.9rem 1.8rem}
.sj .sj-envoi .sj-btn[aria-busy="true"]{opacity:.75!important;pointer-events:none}
.sj .sj-envoi p{font-size:.85rem;color:var(--sj-muted)}
.sj .sj-envoi a,.sj .sj-merci a[href^="tel"]{color:var(--sj-navy)!important;font-weight:700;border-bottom:1.5px solid var(--sj-gold)}
@media(max-width:900px){.sj .sj-dem-grid{grid-template-columns:1fr}.sj .sj-recap{position:static}}
@media(max-width:560px){.sj .sj-form-row{grid-template-columns:1fr}.sj .sj-envoi .sj-btn{width:100%;justify-content:center}}

/* ---- Merci ---- */
.sj .sj-merci{max-width:44rem;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--sj-line);border-radius:22px;padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 18px 40px rgba(6,53,111,.1);outline:none}
.sj .sj-merci-ico{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:999px;background:var(--sj-gold);color:var(--sj-navy);box-shadow:0 10px 26px rgba(255,172,36,.45);margin-bottom:1rem}
.sj .sj-merci-ico svg{width:30px;height:30px}
.sj .sj-merci h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.sj .sj-merci>p{margin-top:.7rem;color:var(--sj-muted)}
.sj .sj-merci-liste{margin:1.2rem auto 0;max-width:30rem;text-align:left;border:1px solid var(--sj-line);border-radius:14px;overflow:clip}
.sj .sj-merci-liste li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .9rem;font-size:.92rem}
.sj .sj-merci-liste li+li{border-top:1px solid var(--sj-line)}
.sj .sj-merci-liste b{color:var(--sj-navy);white-space:nowrap}
.sj .sj-merci .sj-merci-total{margin-top:.7rem;font-size:.92rem;color:var(--sj-ink)}
.sj .sj-merci-total b{color:var(--sj-navy);font-size:1.1rem;letter-spacing:.01em}
.sj .sj-merci .sj-btn{margin-top:1.4rem}
.sj .sj-btn-navy{background:var(--sj-navy);color:#fff!important;box-shadow:0 4px 16px rgba(6,53,111,.3)}
.sj .sj-btn-navy:hover{background:var(--sj-navy);box-shadow:0 12px 28px rgba(6,53,111,.42)}
