/* nav.css — LA PALETTE DE NAVIGATION ET SON GIZMO (web/static/plano3d/), la feuille de style
   du module Plano3D.nav (nav.js). Sortie du gabarit du planogramme le 06/09/2026 pour que
   le magasin vivant l'affiche à l'identique : une seule feuille, deux pages. Les règles
   sont celles du planogramme, avec leur histoire ; les sélecteurs propres à ses boutons
   (#pe-col, #att-tog, #pg-big3…) ne gênent pas une page qui ne les a pas. */
.pg-seg{display:inline-flex;border:1px solid var(--bd);border-radius:9px;overflow:hidden;}
.pg-seg button{border:0;border-radius:0;margin:0;}
.pg-seg button+button{border-left:1px solid var(--bd);}
.pg-nav{position:fixed;left:24px;top:200px;z-index:18;width:178px;
   max-width:calc(100vw - 16px);max-height:calc(100vh - 110px);display:flex;
   flex-direction:column;border-radius:12px;border:1px solid rgba(124,58,237,.30);
   background:var(--surface);font-size:11.5px;
   box-shadow:0 1px 2px rgba(20,16,60,.10),0 10px 28px rgba(20,16,60,.17);}
.pg-nav .hd{display:flex;align-items:center;gap:5px;padding:4px 5px 4px 9px;
   border-bottom:1px solid var(--bd);cursor:grab;user-select:none;}
.pg-nav .hd:active{cursor:grabbing;}
.pg-nav .hd b{flex:1;font-size:9px;text-transform:uppercase;letter-spacing:.09em;
   color:var(--accent);font-weight:800;}
.pg-nav .hd button{width:20px;height:20px;padding:0;font-size:10px;line-height:1;
   border-radius:6px;border:1px solid var(--bd);background:var(--surface);
   color:var(--tx);cursor:pointer;}
.pg-nav .bd{overflow:auto;padding:5px 6px 6px;display:flex;flex-direction:column;gap:3px;}
.pg-nav.plie{width:auto;}
.pg-nav.plie .bd{display:none;}
.pg-nav .rg{display:flex;gap:3px;align-items:center;flex-wrap:wrap;}
.pg-nav .ti{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
   color:var(--mut);margin-top:1px;}
/* LE BLANC AUTOUR DU GIZMO ÉTAIT DE LA PLACE PERDUE (Patrice, 30/08 : « je veux encore
   réduire la taille de la palette : mieux l'organiser, remplacer les textes par des jolis
   pictos ou des boutons plus petits et occuper l'espace vide »). Le gizmo tenait 90 px de
   haut sur TOUTE la largeur, avec ~80 px de blanc à sa droite, et le cadrage occupait une
   rangée de plus en dessous. Les commandes montent DANS ce blanc : même hauteur qu'avant,
   une rangée en moins, et tout le cadrage se lit d'un seul coup d'œil. Sans gizmo (2D
   seule) la grille prend simplement toute la largeur. */
.pg-nav .cadre{display:flex;gap:4px;align-items:flex-start;}
.pg-nav .cadre .pg-giz{flex:0 0 82px;height:82px;}
.pg-nav .cadre .pg-giz .anneau{width:76px;height:76px;margin:-38px 0 0 -38px;}
.pg-nav .cadre .mini{flex:1 1 0;min-width:0;display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;align-content:start;}
.pg-nav select,.pg-nav input{font:inherit;font-size:11px;padding:2px 5px;border-radius:7px;
   border:1px solid var(--bd);background:var(--surface);color:var(--tx);
   min-width:0;max-width:100%;flex:1 1 100px;}
.pg-nav button{font:inherit;font-size:11.5px;}
/* LES SEGMENTS TIENNENT SUR LEUR LIGNE (30/08) : « Magasin | Meuble » et
   « 2D | 3D | 2D + 3D » débordaient de la palette et se coupaient en deux rangées ;
   chacun prend maintenant la largeur, ses boutons se partageant la place à égalité. */
.pg-nav .pg-seg{width:100%;}
.pg-nav .pg-seg button{flex:1 1 0;min-width:0;padding:3px 4px;font-size:10.5px;
   line-height:1.3;white-space:nowrap;}
/* CE QUI EST CHOISI SE VOIT (Patrice, 28/08 : « il faut que les boutons indiquent ce
   qui est sélectionné »). L'état ``on`` n'était peint que par ``.pg-ctl button.on`` :
   en déménageant dans la palette, les segments ont perdu leur couleur — Magasin /
   Meuble et 2D / 3D / 2D+3D se ressemblaient tous les cinq. */
.pg-nav button.on{background:#7c3aed;border-color:#7c3aed;color:#fff;}
.pg-nav button[disabled]{opacity:.45;cursor:default;}
.pg-nav .pg-seg{background:var(--surface);}
/* les boutons de scène gardent leur gestionnaire mais perdent leur ancrage absolu :
   dans la palette ils sont dans le flux, comme les autres */
.pg-nav #pg-vue3,.pg-nav #pg-big3,.pg-nav #pg-big2,.pg-nav #pg-cadre3,
.pg-nav #pg-fit,.pg-nav #pg-reset,.pg-nav #pg-fit3{position:static;top:auto;right:auto;
   width:auto;height:auto;font-size:13px;font-weight:600;padding:3px 8px;
   border-radius:7px;box-shadow:none;}
/* UN PICTO SE LIT PLUS GROS QU'UN MOT, et tous à la même taille (29/08). Le libellé
   ayant disparu, c'est le symbole qui porte le sens : à 11,5 px il flottait, perdu au
   milieu d'un bouton dessiné pour deux mots, et la rangée alignait trois hauteurs. */
.pg-nav #pg-reset,.pg-nav #pgn-out,.pg-nav #pgn-in,.pg-nav #pg-fit,
.pg-nav #pg-cadre3,.pg-nav #pg-vue3,
.pg-nav #pe-col,.pg-nav #pe-colr,.pg-nav #att-tog,.pg-nav #att-plus,
.pg-nav #fx-rot,.pg-nav #fx-dup,.pg-nav #fx-del,.pg-nav #mg-plein,.pg-nav #mg-plier-res{min-width:28px;font-size:14px;
   line-height:1.15;padding:2px 6px;text-align:center;}
/* DANS LA GRILLE DE CADRAGE, C'EST LA CASE QUI COMMANDE, PAS LE BOUTON : deux colonnes
   de largeur égale à droite du gizmo. Sélecteurs par identifiant pour passer devant la
   règle ci-dessus, qui leur imposerait une largeur minimale et les ferait déborder. */
.pg-nav .mini #pgn-out,.pg-nav .mini #pgn-in,.pg-nav .mini #pgn-centre,
.pg-nav .mini #pg-big2,.pg-nav .mini #pg-big3,.pg-nav .mini #mg-plein{min-width:0;width:100%;
   position:static;height:auto;border-radius:7px;
   padding:2px 0;font-size:12px;line-height:1.3;text-align:center;white-space:nowrap;
   overflow:hidden;}
/* LA BASCULE MAGASIN / MEUBLE EST LE CHOIX LE PLUS FRÉQUENT, donc les deux plus gros
   pictos de la palette (Patrice, 30/08 : « laisser la bascule du picto un peu plus
   grand »). Le libellé a disparu : c'est le symbole qui porte le sens. */
.pg-nav #pg-seg-vues button{padding:4px 0;line-height:0;}
/* LE DESSIN EST LE LIBELLÉ : il prend la hauteur d'une ligne de texte et demie, et se
   colore comme le bouton — donc en blanc quand celui-ci est allumé. */
.pg-seg .pic{display:block;width:23px;height:18px;margin:0 auto;}
/* elle est DÉJÀ en ``fixed``, et là où on l'a posée : le plein écran ne lui impose
   plus une place, il la fait seulement passer au-dessus du volet agrandi. */
.pg-stage.big2 .pg-nav,.pg-stage.big3 .pg-nav{z-index:18;}
/* EN PLEIN ÉCRAN, PLUS RIEN NE S'ÉCHAPPE DE LA PALETTE (Patrice, 28/08 : « le bouton
   shrink the 2D doit être dans la palette comme tous les boutons »). Ces boutons
   s'ancraient eux-mêmes en haut de l'écran quand le volet s'agrandissait — c'était la
   rustine du temps où la palette disparaissait sous le volet. Elle flotte maintenant
   au-dessus de lui : ils restent chez elle. */
.pg-stage.big2 .pg-nav #pg-big2,.pg-stage.big3 .pg-nav #pg-big3,
.pg-stage.big3 .pg-nav #pg-vue3,.pg-stage.big3 .pg-nav #pg-cadre3,
.pg-stage.big3 .pg-nav #att-tog,
body.pg-plein .pg-nav #pg-fx{position:static;left:auto;top:auto;right:auto;
   z-index:auto;box-shadow:none;transform:none;min-width:0;}
/* l'aide, repliée par défaut : elle explique, elle n'encombre pas */
.pg-nav .ah{margin:4px 0 0;font-size:9.5px;font-weight:800;letter-spacing:.08em;
   text-transform:uppercase;color:var(--accent);cursor:pointer;user-select:none;}
.pg-nav .ah i{font-style:normal;}
.pg-nav .ab{display:flex;flex-direction:column;gap:3px;margin-top:4px;}
.pg-nav .ab .li{font-size:11px;line-height:1.35;color:var(--mut);
   padding-left:8px;border-left:2px solid var(--bd);}
/* LE GIZMO : un cube qui tourne avec la caméra, DANS un anneau à deux axes. Il ne se
   contente pas de se cliquer (Patrice, 28/08 : « on doit pouvoir l'attraper pour faire
   tourner la scène, la zoomer, la translater et la recentrer ») : on l'attrape. */
.pg-giz{position:relative;height:90px;display:flex;align-items:center;
   justify-content:center;perspective:300px;touch-action:none;cursor:grab;}
.pg-giz:active{cursor:grabbing;}
.pg-giz .anneau{position:absolute;left:50%;top:50%;width:88px;height:88px;
   margin:-44px 0 0 -44px;overflow:visible;}
/* les deux arceaux SONT des prises : ``pointer-events:stroke`` rend le trait
   saisissable sans que l'intérieur de l'ellipse n'avale le clic destiné au cube */
.pg-giz .ax{fill:none;stroke-width:7;pointer-events:stroke;opacity:.5;
   stroke-linecap:round;}
.pg-giz .ax:hover{opacity:1;}
.pg-giz .az{stroke:#2f8fe0;}
.pg-giz .el{stroke:#e0333f;}
.pg-giz .ctr,.pg-giz .pan{position:absolute;right:0;top:0;width:21px;height:21px;padding:0;
   font-size:11px;line-height:1;border-radius:6px;border:1px solid var(--bd);
   background:var(--surface);color:var(--tx);cursor:pointer;z-index:2;}
.pg-giz .ctr:hover,.pg-giz .pan:hover{border-color:var(--accent);color:var(--accent);}
/* la poignée de translation ✥ (06/09) : à gauche, symétrique de ⌖ ; on la GLISSE */
.pg-giz .pan{right:auto;left:0;cursor:move;font-size:13px;touch-action:none;}
.pg-giz .pan:active{cursor:grabbing;}
.pg-giz .cube{position:relative;width:40px;height:40px;transform-style:preserve-3d;}
/* SANS CECI, LES SIX FACES SE LISENT EN MÊME TEMPS : les trois faces qui tournent le
   dos à l'écran restent peintes par-dessus les autres, et le cube n'est plus qu'un
   carré violet où six mots se chevauchent (constaté à l'écran le 28/08). */
.pg-giz .f{position:absolute;left:0;top:0;width:40px;height:40px;display:flex;
   align-items:center;justify-content:center;font:inherit;font-size:7.5px;font-weight:800;
   letter-spacing:.03em;text-transform:uppercase;cursor:pointer;padding:0;
   backface-visibility:hidden;-webkit-backface-visibility:hidden;
   border:1px solid rgba(124,58,237,.5);background:rgba(124,58,237,.13);
   color:#5b21b6;border-radius:3px;}
.pg-giz .f:hover{background:rgba(124,58,237,.32);}
.pg-giz .f.av{transform:translateZ(20px);}
.pg-giz .f.ar{transform:rotateY(180deg) translateZ(20px);}
.pg-giz .f.dr{transform:rotateY(90deg) translateZ(20px);}
.pg-giz .f.ga{transform:rotateY(-90deg) translateZ(20px);}
.pg-giz .f.de{transform:rotateX(90deg) translateZ(20px);}
.pg-giz .f.so{transform:rotateX(-90deg) translateZ(20px);}
/* l'aide et les volets se replient par ``hide`` (07/09 : la page magasin n'avait pas la règle du planogramme,
   « le help de la palette de navigation ne se replie pas ») */
.hide{display:none!important;}