/* ═══ labo-universel-main.css — Main styles for Laboratoire Universel ═══ */

        /* ==========================================================================
           CHARTE GRAPHIQUE OFFICIELLE — synchronisée avec params admin
           ========================================================================== */
        :root {
            --or:       <?php echo $css_or; ?>;
            --noir:     <?php echo $css_noir; ?>;
            --sarcelle: <?php echo $css_sarcelle; ?>;
            --vert:     <?php echo $css_vert; ?>;
            --rouge: #ef4444;
            --bleu: #3b82f6;
            --blanc: #ffffff;
            --fond:     <?php echo $css_fond; ?>;
            --sidebar-width: 230px;
        }

       html, body {
            margin: 0;
            padding: 0;
            background-color: transparent !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
      /* HEADER */
        .lab-header {
            background-color: var(--noir);
            color: var(--blanc);
            padding: 6px 16px;
            min-height: 46px; /* plancher, mais PEUT grandir : aucun bouton ne doit jamais disparaître */
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            row-gap: 4px;
            border-bottom: 2px solid var(--or);
            /* AUCUNE OMBRE ICI */
            z-index: 1000;
            flex-shrink: 0;
        }
        .header-left, .header-right {
            display: flex;
            align-items: center;
            gap: 10px;
            /* Correction radicale : si la ligne est trop étroite, les boutons
               passent à la ligne au lieu d'être coupés/perdus hors du header.
               Le header n'a plus de hauteur figée (min-height ci-dessus) pour
               pouvoir grandir automatiquement dans ce cas. */
            flex-wrap: wrap;
            row-gap: 4px;
        }

        .titre-studio {
            font-weight: 900;
            letter-spacing: 0.5px;
            font-size: 0.95rem;
            color: var(--blanc);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .separateur-vertical {
            width: 1px;
            height: 20px;
            background-color: #334155;
            margin: 0 5px;
        }

       .label-id {
            font-size: 0.75rem;
            color: var(--sarcelle);
            font-weight: bold;
            margin-bottom: 0;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .input-nom-objet {
            background-color: #1e1b2e;
            border: 1px solid var(--sarcelle);
            color: var(--or);
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: bold;
            outline: none;
            width: 160px;
            font-size: 0.85rem;
        }

        .discipline-selector {
            background-color: #334155;
            color: var(--blanc);
            border: 1px solid var(--or);
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: bold;
            cursor: pointer;
            outline: none;
            font-size: 0.85rem;
        }

      .layer-selector {
            display: flex;
            gap: 8px;
            background-color: rgba(255,255,255,0.05);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            color: #94a3b8;
            align-items: center;
            border: 1px solid #334155;
            white-space: nowrap;
        }

        .layer-selector label {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            margin: 0;
            font-weight: bold;
        }

      .btn-action {
            padding: 4px 12px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: none;
            font-size: 0.85rem;
            transition: all 0.2s;
            white-space: nowrap;
        }

     .btn-action:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }

        /* NOUVELLE CLASSE POUR BOUTONS CARRÉS (ICÔNES SEULES) */
        .btn-square {
            width: 34px;
            height: 34px;
            padding: 0;
            justify-content: center;
            font-size: 1.2rem; /* Agrandit l'icône */
        }

        .btn-export { background-color: var(--vert); color: var(--blanc); }

        .btn-fermer {
            background-color: transparent; border: 1px solid var(--rouge);
            color: var(--rouge); width: 34px; height: 34px; padding: 0; /* Aligné sur 34px ! */
            display: flex; align-items: center; justify-content: center;
            border-radius: 4px; cursor: pointer; transition: all 0.2s;
            font-size: 1.2rem;
        }
        .btn-fermer:hover { background-color: var(--rouge); color: white; }
      /* CORPS DE L'APPLICATION */
        .app-body {
            flex: 1; min-height: 0;
            background-color: var(--noir); overflow: hidden;
            display: flex; flex-direction: row; position: relative;
        }

            /* MENU LATÉRAL — solidaire du bloc entête */
        .sidebar-tools {
            position: relative;
            top: 0;
            /* Largeur agrandie pour afficher les noms des boutons sans retour à la ligne */
            width: var(--sidebar-width, 230px);
            background-color: var(--noir); display: flex; flex-direction: column;
            align-items: stretch; padding: 10px 8px 30px 8px; gap: 8px;
            border-right: none;
            z-index: 1001;
            overflow-y: auto; flex-shrink: 0;
            box-sizing: border-box;
        }

        .tool-btn {
            background-color: transparent; border: 1px solid transparent; color: #94a3b8;
            font-size: 1.05rem; cursor: pointer; padding: 0 10px; border-radius: 4px;
            width: 100%; min-height: 34px; height: 34px; display: flex; align-items: center;
            justify-content: space-between; flex-shrink: 0; transition: all 0.2s;
            gap: 8px; box-sizing: border-box; white-space: nowrap; overflow: hidden;
        }

        /* Affiche automatiquement le nom de chaque bouton (repris du title Vue/PHP) avant l'icône */
        .sidebar-tools .tool-btn::before {
            content: attr(title);
            display: block;
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
            font-size: 0.62rem;
            line-height: 1;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #cbd5e1;
            opacity: 0.92;
        }

        .sidebar-tools .tool-btn i {
            flex: 0 0 auto;
            min-width: 18px;
            text-align: center;
        }
        .tool-btn:hover { background-color: rgba(255,255,255,0.1); color: var(--blanc); }
        .tool-btn:hover::before { color: var(--blanc); }
        .tool-btn.active { color: var(--or); border-color: var(--or); background-color: rgba(212,175,55,0.2); }
        .tool-btn.active::before { color: var(--or); }

        /* Curseur de réduction / agrandissement du menu latéral */
        .sidebar-resizer {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            min-height: 28px;
            padding: 5px 7px;
            box-sizing: border-box;
            border: 1px solid rgba(212,175,55,0.35);
            border-radius: 6px;
            background: rgba(255,255,255,0.045);
            color: var(--or);
            flex-shrink: 0;
            white-space: nowrap;
        }
        .sidebar-resizer .sidebar-resizer-label {
            font-size: 0.62rem;
            font-weight: 800;
            line-height: 1;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .sidebar-resizer input[type=range] {
            flex: 1;
            min-width: 44px;
            height: 4px;
            accent-color: var(--or);
            cursor: ew-resize;
        }
        .sidebar-resizer .sidebar-resizer-value {
            font-size: 0.58rem;
            color: #94a3b8;
            font-weight: 700;
            min-width: 32px;
            text-align: right;
        }
        body.sidebar-compact .sidebar-tools { padding-left: 6px; padding-right: 6px; }
        body.sidebar-compact .sidebar-tools .tool-btn { justify-content: center; padding: 0; }
        body.sidebar-compact .sidebar-tools .tool-btn::before { display: none; }
        body.sidebar-compact .sidebar-resizer { justify-content: center; padding: 5px 3px; }
        body.sidebar-compact .sidebar-resizer .sidebar-resizer-label,
        body.sidebar-compact .sidebar-resizer .sidebar-resizer-value { display: none; }

        .palette-couleurs {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 5px;
            padding: 2px 4px;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .color-btn {
            width: 24px; height: 24px; border-radius: 4px; border: 2px solid #555;
            cursor: pointer; margin: 0; flex: 0 0 24px; transition: all 0.2s;
            padding: 0; box-sizing: border-box;
        }
        .color-btn:hover { transform: translateY(-1px); border-color: var(--blanc); }
        .color-btn.active { border-color: var(--or); transform: scale(1.15); border-width: 2px; box-shadow: 0 0 0 2px rgba(212,175,55,0.25); }
        .color-btn[style*='#ffffff'], .color-btn[style*='rgb(255, 255, 255)'] { border-color: #94a3b8 !important; }

        body.sidebar-compact .palette-couleurs { gap: 4px; padding: 2px 0; }
        body.sidebar-compact .color-btn { width: 22px; height: 22px; flex-basis: 22px; }

        .separateur-horizontal { width: 100%; height: 1px; background-color: #334155; margin: 6px 0; flex-shrink: 0; }

        .btn-finir-poly {
            color: var(--blanc); background-color: var(--vert); border-radius: 4px;
            font-size: 0.7rem; width: 38px; height: 26px; font-weight: bold;
            border: none; margin-top: 6px; cursor: pointer; flex-shrink: 0;
        }

     /* LA ZONE DE DESSIN ET BARRES DE DÉFILEMENT */
        /* SENS DE LECTURE FORCÉ À GAUCHE→DROITE.
           En arabe, toute l'application passe en « rtl » et le défilement
           horizontal s'inverse : la position de départ calculée pour centrer la
           figure envoyait la vue à l'opposé, et l'élève arabophone ouvrait une
           feuille VIDE alors que la figure était bien là, hors champ.
           Un plan de coordonnées n'a pas de sens de lecture : ses abscisses
           croissent vers la droite dans toutes les langues. Les textes arabes
           qu'il contient gardent, eux, leur propre « dir ». */
        .zone-dessin {
            direction: ltr;
            position: relative; top: 0; bottom: 0; left: 0; right: 0;
            flex: 1; min-width: 0; min-height: 0;
            overflow: scroll !important; display: block;
            background: #1a1829;
            background-image: radial-gradient(circle at 1px 1px, rgba(212,175,55,0.07) 1px, transparent 0);
            background-size: 28px 28px;
            scrollbar-width: thin;
            scrollbar-color: rgba(212,175,55,0.65) rgba(17,15,25,0.7);
        }
        .zone-dessin::-webkit-scrollbar { width: 12px; height: 12px; }
        .zone-dessin::-webkit-scrollbar-track { background: rgba(17,15,25,0.8); border: 1px solid rgba(212,175,55,0.08); }
        .zone-dessin::-webkit-scrollbar-thumb { background: linear-gradient(135deg, rgba(212,175,55,0.8), rgba(212,175,55,0.5)); border-radius: 6px; border: 2px solid rgba(17,15,25,0.5); }
        .zone-dessin::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,1); }
        .zone-dessin::-webkit-scrollbar-corner { background: rgba(17,15,25,0.9); border: 1px solid rgba(212,175,55,0.1); }

        /* Espace de travail élève : le canvas (1600×1200 fixe en interne) est
           réduit par transform CSS pour tenir dans l'écran. align-items/
           justify-content à flex-start, PAS center : le calcul de l'échelle
           (bmAjusterEchelleEleve) suppose un canvas ancré en haut à gauche
           (transform-origin: top left) — le centrer par flexbox centre la
           boîte 1600×1200 NON transformée (la transform CSS ne change pas la
           taille de mise en page, seulement le rendu), ce qui recadrait la
           caméra sur le MILIEU du canvas au lieu du coin haut-gauche.
           overflow reste "auto" (comme .zone-dessin) plutôt que "hidden" :
           l'échelle calculée peut être imparfaite (marges, arrondis, contenu
           qui dépasse le cadre 1600×1200 prévu) — sans barre de défilement de
           secours, tout ce qui dépasse devient définitivement inatteignable. */
        .zone-dessin-ajustee {
            overflow: auto !important;
            display: flex !important;
            /* Centré HORIZONTALEMENT (et non plus ancré à gauche) : le cadre du
               bloc labo choisi dans Création Savoir colle rarement au ratio
               4:3 du canvas (1600×1200), et le reliquat d'espace se
               retrouvait entièrement à droite au lieu d'être réparti. Centrer
               ne touche PAS le calcul de l'échelle (bmAjusterEchelleEleve ne
               lit que la taille de .zone-dessin, pas sa position) ni les
               coordonnées clic→figure (elles lisent le rect du <svg>
               lui-même via getBoundingClientRect, juste où qu'il se trouve).
               VERTICALEMENT en revanche on reste en flex-start : l'échelle
               est désormais calée sur la LARGEUR du bloc (bmAjusterEchelleEleve),
               donc un bloc large mais bas produit un canvas plus haut que la
               zone visible — avec align-items:center, ce dépassement se
               répartirait aussi en haut, rendant le haut de la figure
               inatteignable au défilement (le scroll ne va jamais en négatif). */
            align-items: flex-start;
            justify-content: center;
            /* Le cadre du bloc labo (choisi dans Création Savoir) ne colle
               jamais exactement au ratio 4:3 du canvas : l'espace qui reste
               une fois le canvas mis à l'échelle montrait le fond sombre de
               la zone de travail (pensé pour l'admin), tranchant fort avec
               le canvas blanc — on le passe en blanc pour que ce reliquat
               se fonde avec le canvas au lieu d'apparaître comme un bandeau. */
            background: var(--canvas-bg, #ffffff) !important;
            background-image: none !important;
        }

      .canvas-container {
            width: 1600px !important; min-width: 1600px !important;
            height: 1200px !important; min-height: 1200px !important;
            position: relative; background-color: var(--canvas-bg, var(--blanc));
            box-shadow: 0 0 0 1px rgba(212,175,55,0.2), 6px 6px 24px rgba(0,0,0,0.35);
            overflow: hidden; transform-origin: top left; touch-action: none;
            margin: 14px;
        }

        .grid-layer, .layer-maths, .layer-svg, .layer-dessin {
            position: absolute; top: 0; left: 0; width: 1600px; height: 1200px;
        }

        .grid-layer {
            pointer-events: none; opacity: 0.15;
            background-image: linear-gradient(#64748b 1px, transparent 1px), linear-gradient(90deg, #64748b 1px, transparent 1px);
            background-size: 40px 40px; z-index: 1;
        }

        .layer-maths { z-index: 2; pointer-events: none; }
        .layer-svg { z-index: 5; }
        .layer-dessin { z-index: 10; }

        /* PANNEAUX FLOTTANTS */
       .id-panel-floating {
           position: absolute; top: 15px; right: 15px; background: rgba(17, 15, 25, 0.95);
           color: var(--or); padding: 15px; border-radius: 8px; pointer-events: auto;
           max-height: 400px; overflow-y: auto; border: 1px solid var(--or);
           min-width: 250px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 2000;
       }

       .var-panel-floating {
           position: absolute; background: rgba(17, 15, 25, 0.95);
           color: var(--or); border-radius: 8px; pointer-events: auto;
           max-height: 400px; border: 1px solid var(--or);
           width: 220px; box-shadow: 0 8px 25px rgba(0,0,0,0.7); z-index: 2000;
           display: flex; flex-direction: column; overflow: hidden;
       }
       .var-panel-header {
           background: #000; padding: 6px 12px; font-weight: bold; cursor: move;
           border-bottom: 1px solid var(--or); display: flex; justify-content: space-between; align-items: center;
           user-select: none; font-size: 0.85rem;
       }
    .var-panel-content {
           padding: 12px; overflow-y: auto; flex: 1;
       }

      .grid-outils {
            display: grid;
            /* Une seule colonne : les libellés restent lisibles et ne passent pas à la ligne */
            grid-template-columns: 1fr;
            gap: 6px;
            width: 100%;
            padding: 0 4px;
            box-sizing: border-box;
       }


        * { scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.4) rgba(17,15,25,0.3); }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: rgba(17,15,25,0.4); }
        ::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.5); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,1); }


        /* ══ THÈME CANVAS ══ */
        :root { --canvas-bg: #ffffff; --canvas-grid: #e2e8f0; --canvas-axes: #110f19; }
        .theme-panel { display:flex; align-items:center; gap:3px; background:rgba(0,0,0,0.2); border:1px solid rgba(212,175,55,0.18); border-radius:6px; padding:3px 5px; flex-shrink:0; }
        .canvas-theme-btn { width:22px; height:22px; border-radius:4px; border:2px solid rgba(255,255,255,0.12); cursor:pointer; transition:all 0.15s; flex-shrink:0; padding:0; }
        .canvas-theme-btn.active { border-color: var(--or) !important; box-shadow: 0 0 0 2px rgba(212,175,55,0.4); }
        .canvas-theme-btn:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.5) !important; }
        .sep-v { width:1px; height:16px; background:rgba(255,255,255,0.1); flex-shrink:0; }
        .color-pick-wrap input[type=color] { width:22px; height:22px; border-radius:4px; border:2px solid rgba(255,255,255,0.12); cursor:pointer; padding:0; }
        .color-pick-wrap input[type=color]:hover { border-color:rgba(255,255,255,0.5); transform:scale(1.1); }

        [v-cloak] { display: none !important; }
        .flash-fade-enter-active{transition:opacity 0.15s;}.flash-fade-leave-active{transition:opacity 0.5s;}.flash-fade-enter-from,.flash-fade-leave-to{opacity:0;}