/* Page 3D du coffret — CSS 3D pur, sans dépendance */
.c3d-section{padding:34px 0 10px}
.c3d-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.c3d-head h1{margin:0;font-size:clamp(24px,3vw,36px)}
.c3d-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);gap:26px;align-items:start}

.stage{position:relative;height:560px;border-radius:22px;overflow:hidden;cursor:grab;touch-action:none;
  background:radial-gradient(120% 120% at 50% 18%,#1B3A66 0%,#0C1F3D 55%,#081427 100%);
  box-shadow:0 24px 60px rgba(12,31,61,.35)}
.stage:active{cursor:grabbing}
.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 88%,rgba(198,164,92,.12),transparent 70%);pointer-events:none}
.stage-hint{position:absolute;left:18px;bottom:14px;font-size:12px;color:#9FB0C8;z-index:5}

/* ---- scène ---- */
.scene{position:absolute;left:50%;top:76%;width:0;height:0;transform-style:preserve-3d;
  --W:300px;--H:36px;--D:204px;
  transform:translate(-50%,-50%) rotateX(var(--rx,-38deg)) rotateY(var(--ry,-30deg)) scale(var(--zoom,1.25))}
.scene.open .lidPivot{transform:translateY(-36px) translateZ(-102px) rotateX(100deg)}

/* ---- faces génériques ---- */
.face{position:absolute;left:0;top:0;transform-style:preserve-3d}
.f-front,.f-back{width:var(--W);height:var(--H)}
.f-left,.f-right{width:var(--D);height:var(--H)}
.f-top,.f-bottom{width:var(--W);height:var(--D)}
.f-front{transform:translate(-50%,-50%) translateZ(calc(var(--D)/2))}
.f-back{transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--D)/2))}
.f-right{transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--W)/2))}
.f-left{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--W)/2))}
.f-top{transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--H)/2))}
.f-bottom{transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--H)/2))}

/* ---- plateau ---- */
.tray{position:absolute;transform-style:preserve-3d;transform:translateY(-18px)}
.tray .f-front,.tray .f-back{background:linear-gradient(180deg,#1B3865,#0E2344);
  border-top:3px solid #C6A45C;border-bottom:2px solid rgba(0,0,0,.35)}
.tray .f-left,.tray .f-right{background:linear-gradient(180deg,#17325C,#0B1C38);border-top:3px solid #C6A45C}
.tray .f-bottom{background:#091830;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.floor{position:absolute;width:288px;height:192px;background:linear-gradient(180deg,#F7F4EC,#E9E3D2);
  transform:translate(-50%,-50%) translateY(-1px) rotateX(90deg);box-shadow:inset 0 0 0 3px rgba(198,164,92,.55)}

/* ---- cartes ---- */
.card{position:absolute;width:0;height:0;transform-style:preserve-3d;
  --W:248px;--H:2px;--D:156px;
  transform:translate3d(var(--x,0),var(--y,-2px),var(--z,0)) rotateY(var(--rY,0deg))}
.card .f-front,.card .f-back{background:#dfe3ea}
.card .f-left,.card .f-right{background:#cfd5df}
.card .f-top,.card .f-bottom{background:#fff;border-radius:8px;overflow:hidden;
  background-size:100% 100%;background-position:center;background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.32)}
.card .f-top{background-image:url(../assets/coffret/card-a-recto.png)}
.card .f-bottom{background-image:url(../assets/coffret/card-a-verso.png)}
.card--b .f-top{background-image:url(../assets/coffret/card-b-recto.png)}
.card--b .f-bottom{background-image:url(../assets/coffret/card-b-verso.png)}
.card--a{--x:0px;--y:-2px;--z:6px;--rY:0deg}
.card--b{--x:5px;--y:-5px;--z:-7px;--rY:-3deg}

/* ---- couvercle ---- */
.lidPivot{position:absolute;width:0;height:0;transform-style:preserve-3d;
  transform:translateY(-36px) translateZ(-102px) rotateX(0deg);
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.lid{position:absolute;width:0;height:0;transform-style:preserve-3d;--H:24px;
  transform:translateY(-12px) translateZ(102px)}
.lid .f-front,.lid .f-back{background:linear-gradient(180deg,#1B3865,#0E2344);border-bottom:2px solid #C6A45C}
.lid .f-left,.lid .f-right{background:linear-gradient(180deg,#17325C,#0B1C38)}
.lid .f-top{background:linear-gradient(150deg,#0B1B33,#17325C);
  background-image:url(../assets/logo_boad_blanc.png),linear-gradient(150deg,#0B1B33,#17325C);
  background-repeat:no-repeat;background-position:center 38%,0 0;background-size:46% auto,100% 100%;
  box-shadow:inset 0 0 0 2px rgba(198,164,92,.85),0 10px 30px rgba(0,0,0,.5)}
.lid .f-bottom{background:linear-gradient(180deg,#F7F4EC,#EFE9D9);
  background-image:url(../assets/logo_boaid_rouge.png),linear-gradient(180deg,#F7F4EC,#EFE9D9);
  background-repeat:no-repeat;background-position:center;background-size:30% auto,100% 100%;
  box-shadow:inset 0 0 0 2px rgba(198,164,92,.7)}
.table{position:absolute;width:620px;height:440px;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));
  transform:translate(-50%,-50%) rotateX(90deg);filter:blur(12px);opacity:.6}

/* ---- commandes ---- */
.c3d-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.c3d-controls .btn{padding:10px 16px;font-size:14px}
.c3d-controls .btn[aria-pressed="true"]{background:var(--gold);color:#1A1508;border-color:transparent}

/* ---- panneau specs ---- */
.spec-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.spec-card h2{margin:0 0 12px;font-size:19px}
.spec-list{list-style:none;margin:0;padding:0}
.spec-list li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #F0EEE7;font-size:14px}
.spec-list li:last-child{border-bottom:0}
.spec-list b{min-width:118px;color:var(--navy)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.legend span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.legend i{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.presentation-figure{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.presentation-figure img{display:block;width:100%;height:auto;border-radius:10px}
.c3d-note{font-size:13px;color:var(--muted);margin-top:14px}
@media(max-width:900px){
  .c3d-grid{grid-template-columns:1fr}
  .stage{height:440px}
  .legend{grid-template-columns:1fr}
}