/* ===========================================================================
   TEC'OFFICE M08 — siege de travail en 3D (planche des six reglages)
   ---------------------------------------------------------------------------
   Composant : <div class="s3d" data-siege3d> ... </div>
   - la scene (cadre papier quadrille, toile WebGL, affiche de secours, reperes)
   - la legende <ol class="s3d-reglages"> : le texte vit dans le HTML, lisible
     sans WebGL et sans JavaScript.
   Bureau : liste a cote de la scene. Telephone / tablette : la scene au-dessus,
   les reglages en cartes qui defilent a l'horizontale (chaque carte arrivee
   montre son reglage sur le siege).
   Aucun etat cache en CSS seul : la toile ne s'efface que si le JS a pose
   .s3d--3d, et elle ne contient rien sans lui.
   =========================================================================== */

.s3d{
  --s3d-acc:#1f8fd0;
  --s3d-acc-f:rgba(31,143,208,.09);
  --s3d-ink:var(--ink,#131312);
  --s3d-ink2:var(--ink2,#3b3a37);
  --s3d-tech:var(--tech,#6b6a64);
  --s3d-line:var(--line,#dbd9d2);
  --s3d-line2:var(--line2,#c9c7bf);
  --s3d-mono:var(--mono,'JetBrains Mono',ui-monospace,monospace);
  --s3d-disp:var(--disp,'Inter Tight','Inter',sans-serif);
  --s3d-ease:var(--ease,cubic-bezier(.16,1,.3,1));
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;
  margin-top:clamp(30px,4vh,52px);
}

/* ---------- la planche ---------------------------------------------------- */
.s3d-scene{position:relative;min-width:0;container-type:inline-size;border:1px solid var(--s3d-line2);border-radius:6px;
  overflow:hidden;
  background:
    linear-gradient(rgba(19,19,18,.045) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(19,19,18,.045) 1px,transparent 1px) 0 0/28px 28px,
    #fbfaf7;}
.s3d-hd,.s3d-pied{position:relative;z-index:3;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  margin:0;padding:11px clamp(14px,2vw,22px);
  font-family:var(--s3d-mono);font-size:9px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s3d-tech);font-variant-numeric:tabular-nums;}
/* en-tete : le titre et « vue d'ensemble » partagent la meme case, la hauteur ne bouge jamais */
.s3d-hd{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
  border-bottom:1px solid var(--s3d-line);background:var(--paper2,#eae9e4);}
.s3d-hd b{font-weight:500;color:var(--s3d-ink);letter-spacing:.15em;padding:3px 8px 2px;
  border:1px solid var(--s3d-line2);border-radius:3px;background:var(--white,#fff);}
.s3d-hd-t,.s3d-raz{grid-row:1;grid-column:2;}
.s3d-hd-t{justify-self:start;min-width:0;transition:opacity .3s var(--s3d-ease);}
.s3d-pied{justify-content:space-between;border-top:1px solid var(--s3d-line);background:rgba(251,250,247,.92);}
.s3d-raz{position:relative;z-index:1;justify-self:end;display:inline-flex;align-items:center;gap:7px;min-height:28px;margin:-6px 0;padding:4px 10px 3px;
  font:inherit;letter-spacing:.15em;text-transform:uppercase;color:var(--s3d-ink);background:var(--white,#fff);
  border:1px solid var(--s3d-line2);border-radius:3px;cursor:pointer;visibility:hidden;opacity:0;
  transition:border-color .3s var(--s3d-ease),opacity .3s var(--s3d-ease),visibility 0s linear .3s;}
@media (hover:hover) and (pointer:fine){ .s3d-raz:hover{border-color:var(--s3d-ink);} }
.s3d.s3d--actif .s3d-raz{visibility:visible;opacity:1;transition:border-color .3s var(--s3d-ease),opacity .3s var(--s3d-ease);}
/* planche etroite : « vue d'ensemble » prend la place du titre. Le titre
   efface ne doit plus capter le doigt : a opacite 0 il passait AU-DESSUS du
   bouton (contexte d'empilement) et le toucher ne remettait pas la vue. */
@container (max-width:520px){ .s3d.s3d--actif .s3d-hd-t{opacity:0;pointer-events:none;} }

/* la vue : toujours carree, pour que l'affiche et les reperes tombent juste */
.s3d-vue{position:relative;width:100%;max-width:680px;margin:0 auto;aspect-ratio:1/1;}
.s3d-vue::before{content:'';position:absolute;inset:14px;z-index:1;pointer-events:none;opacity:.55;
  background:
    linear-gradient(var(--s3d-ink),var(--s3d-ink)) left top/14px 1px no-repeat,
    linear-gradient(var(--s3d-ink),var(--s3d-ink)) left top/1px 14px no-repeat,
    linear-gradient(var(--s3d-ink),var(--s3d-ink)) right top/14px 1px no-repeat,
    linear-gradient(var(--s3d-ink),var(--s3d-ink)) right top/1px 14px no-repeat,
    linear-gradient(var(--s3d-ink),var(--s3d-ink)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--s3d-ink),var(--s3d-ink)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--s3d-ink),var(--s3d-ink)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--s3d-ink),var(--s3d-ink)) right bottom/1px 14px no-repeat;}
.s3d-poster,.s3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.s3d-poster{object-fit:contain;z-index:0;}
.s3d-canvas{z-index:0;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;
  transition:opacity .7s var(--s3d-ease);}
.s3d-canvas.is-drag{cursor:grabbing;}
.s3d.s3d--3d .s3d-canvas{opacity:0;}
.s3d.s3d--3d.s3d--vivant .s3d-canvas{opacity:1;}
.s3d.s3d--vivant .s3d-poster{opacity:0;visibility:hidden;transition:opacity .7s var(--s3d-ease),visibility 0s linear .7s;}
.s3d.s3d--affiche .s3d-canvas{display:none;}

/* ---------- reperes 01 a 06 ----------------------------------------------- */
.s3d-pins{position:absolute;inset:0;z-index:3;pointer-events:none;}
.s3d-pin{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--s3d-ink);
  background:var(--paper,#f2f1ed);color:var(--s3d-ink);
  font-family:var(--s3d-mono);font-size:9.5px;font-weight:500;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;pointer-events:auto;cursor:pointer;will-change:transform;
  box-shadow:0 1px 0 rgba(19,19,18,.08),0 4px 14px -6px rgba(19,19,18,.35);
  transition:background .3s var(--s3d-ease),color .3s var(--s3d-ease),border-color .3s var(--s3d-ease),
    opacity .35s var(--s3d-ease);}
.s3d-pin::before{content:'';position:absolute;inset:-9px;border-radius:50%;}
.s3d-pin::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--s3d-ink);
  opacity:0;pointer-events:none;}
.s3d-pin.is-derriere{opacity:.38;}
.s3d.s3d--actif .s3d-pin:not(.is-actif){opacity:.5;}
.s3d-pin.is-actif{background:var(--s3d-acc);border-color:var(--s3d-acc);color:#fff;opacity:1;}
@media (hover:hover) and (pointer:fine){
  .s3d-pin:hover{background:var(--s3d-ink);color:var(--paper,#f2f1ed);opacity:1;}
  .s3d-pin.is-actif:hover{background:var(--s3d-acc);color:#fff;}
}
@keyframes s3d-onde{0%{opacity:.55;transform:scale(1);}70%,100%{opacity:0;transform:scale(1.9);}}
.s3d.s3d--vivant:not(.s3d--actif) .s3d-pin::after{animation:s3d-onde 3.2s var(--s3d-ease) infinite;}
.s3d.s3d--vivant:not(.s3d--actif) .s3d-pin:nth-child(2)::after{animation-delay:.5s;}
.s3d.s3d--vivant:not(.s3d--actif) .s3d-pin:nth-child(3)::after{animation-delay:1s;}
.s3d.s3d--vivant:not(.s3d--actif) .s3d-pin:nth-child(4)::after{animation-delay:1.5s;}
.s3d.s3d--vivant:not(.s3d--actif) .s3d-pin:nth-child(5)::after{animation-delay:2s;}
.s3d.s3d--vivant:not(.s3d--actif) .s3d-pin:nth-child(6)::after{animation-delay:2.5s;}

/* ---------- cotes (trace de dessinateur, au-dessus de la toile) ------------ */
.s3d-cotes{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .35s var(--s3d-ease);}
.s3d-cotes.is-on{opacity:1;}
.s3d-cotes svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.s3d-cotes line,.s3d-cotes polyline{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.s3d-dim,.s3d-arc,.s3d-cur{stroke:var(--s3d-acc);stroke-width:1.35;}
.s3d-ext line{stroke:var(--s3d-ink);stroke-opacity:.5;stroke-width:.8;stroke-dasharray:3 3;}
.s3d-ref{stroke:var(--s3d-ink);stroke-opacity:.55;stroke-width:.9;stroke-dasharray:7 3 1.5 3;}
.s3d-lead{stroke:var(--s3d-acc);stroke-opacity:.55;stroke-width:.8;}
.s3d-cotes marker path{fill:var(--s3d-acc);}
.s3d-tic{fill:var(--s3d-acc);stroke:#fff;stroke-width:1.5;}
.s3d-lab{position:absolute;left:0;top:0;padding:7px 10px 6px;min-width:112px;
  background:rgba(255,255,255,.94);border:1px solid var(--s3d-acc);border-radius:3px;
  box-shadow:0 6px 18px -10px rgba(19,19,18,.45);
  font-family:var(--s3d-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
.s3d-lab em{display:block;font-style:normal;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--s3d-acc);line-height:1.5;}
.s3d-lab b{display:block;margin:2px 0 1px;font-family:var(--s3d-disp);font-weight:800;font-size:21px;
  line-height:1.1;letter-spacing:-.01em;color:var(--s3d-ink);}
.s3d-lab span{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--s3d-tech);line-height:1.5;}

/* ---------- la legende ----------------------------------------------------- */
.s3d-reglages{position:relative;list-style:none;margin:0;padding:0;min-width:0;
  border-top:1px solid var(--s3d-ink);counter-reset:none;}
.s3d-r{position:relative;padding:15px 4px 17px 16px;border-bottom:1px solid var(--s3d-line);cursor:pointer;
  transition:background .35s var(--s3d-ease);}
.s3d-r::before{content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--s3d-acc);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--s3d-ease);}
.s3d-r.is-actif{background:linear-gradient(90deg,var(--s3d-acc-f),rgba(31,143,208,0) 85%);}
.s3d-r.is-actif::before{transform:scaleY(1);}
@media (hover:hover) and (pointer:fine){
  .s3d-r:not(.is-actif):hover{background:var(--paper2,#eae9e4);}
}
.s3d-rb{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:baseline;width:100%;
  margin:0;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;}
.s3d-rb:focus-visible{outline:2px solid var(--s3d-ink);outline-offset:4px;border-radius:2px;}
.s3d-no{font-family:var(--s3d-mono);font-size:10px;letter-spacing:.08em;color:var(--s3d-tech);
  font-variant-numeric:tabular-nums;transition:color .3s var(--s3d-ease);}
.s3d-t{font-family:var(--s3d-disp);font-weight:800;text-transform:uppercase;font-size:clamp(14px,1.15vw,16.5px);
  letter-spacing:.01em;line-height:1.25;color:var(--s3d-ink);}
.s3d-v{font-family:var(--s3d-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--s3d-ink2);font-variant-numeric:tabular-nums;transition:color .3s var(--s3d-ease);}
.s3d-r.is-actif .s3d-no,.s3d-r.is-actif .s3d-v{color:var(--s3d-acc);}
.s3d-d{margin:7px 0 0 42px;max-width:54ch;font-size:clamp(14px,1.05vw,15px);line-height:1.62;color:var(--s3d-ink2);}
.s3d-d b{font-weight:600;color:var(--s3d-ink);}

/* bureau : la planche reste a l'ecran pendant qu'on parcourt la legende */
@media (min-width:960px){
  .s3d-scene{position:sticky;top:calc(var(--s3d-haut,96px) + 16px);}
}

/* tablette et telephone : scene pleine largeur, reglages en cartes ---------- */
@media (max-width:959px){
  .s3d{grid-template-columns:minmax(0,1fr);gap:16px;}
  .s3d-reglages{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;border-top:0;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 calc(-1 * var(--pad,24px));padding:2px var(--pad,24px) 6px;scroll-padding-inline:var(--pad,24px);}
  .s3d-reglages::-webkit-scrollbar{display:none;}
  .s3d-r{flex:0 0 min(82%,340px);scroll-snap-align:start;padding:15px 16px 17px;
    border:1px solid var(--s3d-line2);border-radius:6px;background:var(--white,#fff);}
  .s3d-r::before{left:-1px;right:-1px;top:-1px;bottom:auto;width:auto;height:2px;border-radius:6px 6px 0 0;
    transform:scaleX(0);transform-origin:0 50%;}
  .s3d-r.is-actif{background:var(--white,#fff);border-color:var(--s3d-acc);}
  .s3d-r.is-actif::before{transform:scaleX(1);}
  .s3d-rb{grid-template-columns:26px minmax(0,1fr);row-gap:4px;}
  .s3d-v{grid-column:2;}
  .s3d-d{margin:9px 0 0;font-size:14px;line-height:1.58;}
}
.s3d-defile{display:none;align-items:center;gap:10px;margin:-4px 0 0;
  font-family:var(--s3d-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--s3d-tech);}
.s3d-defile::after{content:'';flex:1 1 auto;height:1px;background:var(--s3d-line2);}
@media (max-width:959px){ .s3d-defile{display:flex;} }
@media (max-width:760px){
  .s3d-hd,.s3d-pied{padding:10px 14px;font-size:8.5px;letter-spacing:.1em;}
}
/* tablettes et telephones : etiquettes mono lisibles (>= 10 px), comme le reste du site */
@media (max-width:1100px){
  .s3d-hd,.s3d-pied,.s3d-defile,.s3d-no,.s3d-v{font-size:10px;}
  .s3d-hd,.s3d-pied,.s3d-defile{letter-spacing:.1em;}
  /* l'etiquette de cote et les reperes aussi (a 768, la planche est large :
     la requete de conteneur ci-dessous ne s'appliquait pas, on restait a 8,5 px) */
  .s3d-lab em,.s3d-lab span{font-size:10px;letter-spacing:.08em;}
  .s3d-pin{font-size:10px;}
}
/* planche etroite (telephone, colonne serree) : etiquette et reperes plus compacts */
@container (max-width:520px){
  .s3d-lab{padding:6px 8px 5px;min-width:0;}
  .s3d-lab b{font-size:17px;}
  .s3d-lab em,.s3d-lab span{font-size:9px;letter-spacing:.1em;}
  .s3d-pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:9px;}
}
@media (max-width:1100px){
  @container (max-width:520px){
    .s3d-lab em,.s3d-lab span{font-size:10px;letter-spacing:.06em;}
    .s3d-pin{font-size:10px;letter-spacing:0;}
  }
}

/* animations reduites : rien ne bouge, rien ne reste cache */
@media (prefers-reduced-motion:reduce){
  .s3d-pin::after{animation:none!important;}
}
html.doux .s3d-pin::after{animation:none!important;}