/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: May 12 2026 | 07:49:59 */
.pf-root{display:flex;flex-direction:column;gap:0;width:100%;font-family:var(--font-sans)}

.pf-ctrl{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 16px;
	margin : 10px;
  width : 900px;
  background:lightgrey;
  border:0.5px solid var(--color-border-tertiary);
  border-radius:10px;
  flex-wrap:wrap;
}
.pf-axis-group{display:flex;flex-direction:column;align-items:center;gap:6px}
.pf-axis-lbl{font-size:11px;color:var(--color-text-secondary);letter-spacing:.06em;text-transform:uppercase}
.pf-btns{display:flex;gap:8px}

.pf-btn{
  width:52px;height:52px;border-radius:var(--border-radius-md);
  border:0.5px solid var(--color-border-secondary);
  background:var(--color-background-primary);
  color:var(--color-text-primary);
  cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  font-family:var(--font-mono);font-size:10px;
  transition:background .15s,border-color .15s,transform .1s;
  position:relative;overflow:hidden;user-select:none;
}
.pf-btn:hover{background:var(--color-background-secondary);border-color:var(--color-border-primary)}
.pf-btn:active{transform:scale(.93)}
.pf-btn.busy{opacity:.35;pointer-events:none}

.pf-arrow{
  width:26px;height:26px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.pf-arc{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid transparent;position:absolute;
}
/* X+ : bas */
.ax-xp{border-top-color:var(--color-border-primary);border-right-color:var(--color-border-primary);transform:rotate(45deg)}
.ax-xp::after{content:'';position:absolute;bottom:-3px;right:-4px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:6px solid var(--color-text-primary);transform:rotate(-15deg)}
/* X- : haut */
.ax-xm{border-bottom-color:var(--color-border-primary);border-left-color:var(--color-border-primary);transform:rotate(45deg)}
.ax-xm::after{content:'';position:absolute;top:-3px;left:-4px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:6px solid var(--color-text-primary);transform:rotate(15deg)}
/* Y+ : droite */
.ax-yp{border-top-color:var(--color-border-primary);border-right-color:var(--color-border-primary);transform:rotate(-45deg)}
.ax-yp::after{content:'';position:absolute;right:-3px;bottom:-4px;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  border-left:6px solid var(--color-text-primary);transform:rotate(40deg)}
/* Y- : gauche */
.ax-ym{border-bottom-color:var(--color-border-primary);border-left-color:var(--color-border-primary);transform:rotate(-45deg)}
.ax-ym::after{content:'';position:absolute;left:-3px;top:-4px;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  border-right:6px solid var(--color-text-primary);transform:rotate(-40deg)}

.pf-btn-lbl{font-size:9px;color:var(--color-text-secondary);letter-spacing:.05em;line-height:1}

.pf-sep{width:1px;height:36px;background:var(--color-border-tertiary);align-self:center}

.pf-info{
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:80px
}
.pf-face-num{font-size:22px;font-weight:500;color:var(--color-text-primary);line-height:1;font-family:var(--font-mono)}
.pf-face-name{font-size:10px;color:var(--color-text-secondary);text-align:center;letter-spacing:.04em}

.pf-dots{display:flex;gap:6px;align-items:center}
.pf-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--color-border-secondary);
  transition:background .25s,transform .25s;
}
.pf-dot.on{background:var(--color-text-primary);transform:scale(1.25)}

.pf-speed{display:flex;flex-direction:column;align-items:center;gap:4px}
.pf-speed input{width:80px}
.pf-speed-lbl{font-size:10px;color:var(--color-text-secondary)}

/* ══ SCÈNE ══════════════════════════════════ */
.pf-scene{
  position:relative;
  border:0.5px solid var(--color-border-tertiary);
  border-top:none;
  border-radius:0 0 var(--border-radius-lg) var(--border-radius-lg);
  overflow:hidden;
  background:var(--color-background-tertiary);
  display:flex;align-items:center;justify-content:center;
  /*padding:32px 24px 40px;*/
  min-height:420px;
}

/* Perspective sur la scène */
.pf-stage{
  perspective:1100px;
  display:flex;align-items:center;justify-content:center;
  width:100%;
}

/* ══ LE PANNEAU ════════════════════════════ */
#pf-panel{
  /* width:min(740px,90%); */
  height:560px;
  border-radius:var(--border-radius-lg);
  border:0.5px solid var(--color-border-tertiary);
  background:var(--color-background-primary);
  overflow:hidden;
  position:relative;
  /* 
    Toute la magie est ici.
    On anime UNIQUEMENT rotateX / rotateY sur CETTE div.
    Phase 1 (out) : 0deg → 90deg  → le panneau disparaît de profil
    Phase 2 (in)  : contenu swappé + -90deg → 0deg → réapparaît
  */
}

@keyframes x-out-down  {from{transform:rotateX(0deg)}  to{transform:rotateX(90deg)}}
@keyframes x-in-down   {from{transform:rotateX(-90deg)} to{transform:rotateX(0deg)}}
@keyframes x-out-up    {from{transform:rotateX(0deg)}   to{transform:rotateX(-90deg)}}
@keyframes x-in-up     {from{transform:rotateX(90deg)}  to{transform:rotateX(0deg)}}
@keyframes y-out-right {from{transform:rotateY(0deg)}   to{transform:rotateY(90deg)}}
@keyframes y-in-right  {from{transform:rotateY(-90deg)} to{transform:rotateY(0deg)}}
@keyframes y-out-left  {from{transform:rotateY(0deg)}   to{transform:rotateY(-90deg)}}
@keyframes y-in-left   {from{transform:rotateY(90deg)}  to{transform:rotateY(0deg)}}

#pf-panel.xod{animation:x-out-down  var(--pf-dur,.45s) ease-in   both}
#pf-panel.xid{animation:x-in-down   var(--pf-dur,.45s) ease-out  both}
#pf-panel.xou{animation:x-out-up    var(--pf-dur,.45s) ease-in   both}
#pf-panel.xiu{animation:x-in-up     var(--pf-dur,.45s) ease-out  both}
#pf-panel.yor{animation:y-out-right var(--pf-dur,.45s) ease-in   both}
#pf-panel.yir{animation:y-in-right  var(--pf-dur,.45s) ease-out  both}
#pf-panel.yol{animation:y-out-left  var(--pf-dur,.45s) ease-in   both}
#pf-panel.yil{animation:y-in-left   var(--pf-dur,.45s) ease-out  both}

/* ══ CONTENU DES FACES ═════════════════════ */
.fc{width:100%;height:100%;display:flex;align-items:stretch;position:relative}

/* Face 1 – graphe1*/
.f1{width:900px;height:100%;}

/* Face 2 – graphe2 */
.f2{flex-direction:column;padding:24px 28px 20px;gap:12px}

/* Face 3 – grapĥe3 */
.f3{flex-direction:column}

/* Face 4 – graphe4 */
.f4{flex-direction:column;padding:32px 36px;gap:14px;justify-content:center}

/* Face 5 – graphe5 */
.f5{position:relative;overflow:hidden;background:var(--color-background-secondary)}

/* Face 6 – graphe6 */
.f6{flex-direction:column;padding:20px 24px;gap:0;overflow-y:auto}

.tl{display:flex;gap:12px;padding:9px 0;border-bottom:0.5px solid var(--color-border-tertiary)}
.tl:last-child{border-bottom:none}
.tl-left{display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:2px}
.tl-d{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tl-vl{flex:1;width:0.5px;background:var(--color-border-tertiary)}
.tl-t{font-size:12px;font-weight:500;color:var(--color-text-primary)}
.tl-m{font-size:11px;color:var(--color-text-secondary);margin-top:2px;line-height:1.5}