/* editeur.css -- l'atelier occupe l'ecran entier. SOURCE PARTAGEE (studio-engine).
   Le Studio travaillait dans une colonne de 380 pixels : on ne cale pas un
   texte au millimetre dans une vignette. Ici la surface de travail prend tout
   ce qu'elle peut, et les reglages vivent dans un panneau fixe a droite.
   Memes sept variables de couleur que studio.css -- voir sa note en tete si ce
   fichier est charge seul (page atelier a part). */
:root {
  --fond: #0d1b2a; --fond-2: #16264a; --fond-3: #1c2f57;
  --bord: #2c3f6e; --texte: #fff8ec; --texte-2: #c9d3ea; --cuivre: #f0c14b;
}

.atelier-page { background: var(--fond); color: var(--texte); }

.atelier-barre {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px; background: var(--fond-2); border-bottom: 1px solid var(--bord);
}
.atelier-produit { color: var(--texte-2); font-size: 13px; }
.atelier-actions { margin-left: auto; display: flex; gap: 8px; }

.atelier {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 0; height: calc(100vh - 57px); min-height: 520px;
}

/* min-height:0 : sans lui, une piste de grille prend la hauteur de son
   contenu. Le canvas de 1400 pixels faisait donc grandir le conteneur au lieu
   de defiler dedans, et le calcul d'ajustement lisait une hauteur qui
   n'existait pas a l'ecran -- le zoom "Ajuster" rendait 99 % sur une image qui
   depassait de partout. */
.plan { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.plan-outils {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 9px 14px; border-bottom: 1px solid var(--bord); background: var(--fond-2);
}
.outil {
  background: var(--fond-3); border: 1px solid var(--bord); color: var(--texte);
  font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 6px; cursor: pointer;
}
.outil:hover { border-color: var(--cuivre); }
.outil[aria-pressed="true"] { border-color: var(--cuivre); color: var(--cuivre); }
.outil.danger:hover { border-color: #ff9a7a; color: #ff9a7a; }
.outil.bascule { display: inline-flex; align-items: center; gap: 7px; }
.outil.bascule input { accent-color: var(--cuivre); }
.plan-outils .sep { width: 1px; height: 20px; background: var(--bord); margin: 0 4px; }
.zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texte-2); }

.plan-toile {
  flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 22px;
  background:
    linear-gradient(45deg, #14181a 25%, transparent 25%) 0 0/22px 22px,
    linear-gradient(-45deg, #14181a 25%, transparent 25%) 0 11px/22px 22px,
    linear-gradient(45deg, transparent 75%, #14181a 75%) 11px -11px/22px 22px,
    linear-gradient(-45deg, transparent 75%, #14181a 75%) -11px 0/22px 22px,
    #0d1012;
}
.plan-toile .canvas-container { box-shadow: 0 18px 60px rgba(0, 0, 0, .6); }
.plan-note { margin: 0; padding: 8px 14px; font-size: 12px; color: var(--texte-2);
  border-top: 1px solid var(--bord); background: var(--fond-2); }

.panneau { min-height: 0; overflow-y: auto; border-left: 1px solid var(--bord); background: var(--fond-2); }
.bloc { padding: 16px; border-bottom: 1px solid var(--bord); }
.bloc h2 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-2); margin: 0 0 10px;
}
.aide { font-size: 12px; color: var(--texte-2); margin: 8px 0 0; }

.champ { display: block; margin-top: 9px; }
.champ > span { display: block; font-size: 11.5px; color: var(--texte-2); margin-bottom: 4px; }
.champ input[type="text"], .champ input[type="number"], .champ select, .champ textarea {
  width: 100%; padding: 7px 9px; border-radius: 6px; background: var(--fond-3);
  border: 1px solid var(--bord); color: var(--texte); font: inherit; font-size: 13px;
}
.champ input[type="color"] { width: 100%; height: 32px; padding: 2px; border-radius: 6px;
  background: var(--fond-3); border: 1px solid var(--bord); }
.champ input[type="range"] { width: 100%; accent-color: var(--cuivre); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rangee-boutons { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }

.apercu-produit { border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; background: #0b0e10; }
.apercu-produit img { display: block; width: 100%; height: auto; }

.calques { list-style: none; margin: 0; padding: 0; }
.calques li {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
  font-size: 12.5px; cursor: pointer; border: 1px solid transparent;
}
.calques li:hover { background: var(--fond-3); }
.calques li[aria-selected="true"] { border-color: var(--cuivre); background: var(--fond-3); }
.calques .vignette { width: 26px; height: 26px; border-radius: 4px; background: var(--fond-3);
  border: 1px solid var(--bord); display: grid; place-items: center; font-size: 11px;
  color: var(--texte-2); flex: none; overflow: hidden; }
.calques .vignette img { width: 100%; height: 100%; object-fit: cover; }
.calques .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calques .oeil { background: none; border: 0; color: var(--texte-2); cursor: pointer; font-size: 13px; }

@media (max-width: 900px) {
  .atelier { grid-template-columns: 1fr; height: auto; }
  .panneau { border-left: 0; border-top: 1px solid var(--bord); }
  .plan-toile { min-height: 52vh; }
}

/* Agrandir, reduire, tourner : les poignees existent, mais personne ne les
   trouve, et le pourcentage de la barre du haut ne zoome que la fenetre. */
.rangee-taille { display: flex; gap: 6px; margin: 2px 0 10px; }
.rangee-taille .outil { flex: 1; font-size: 15px; line-height: 1; padding: 7px 0; }