/* ==========================================================================
   /css/palette.css
   Palette de couleurs - Art en Lignes
   ========================================================================== */

:root{
  --pal-bg:#f5f5f5;
  --pal-frame:#111;
  --pal-card:#ffffff;
  --pal-border:#ddd;
}

/* Page */
.pal-body{
  background: var(--pal-bg);
}

/* IMPORTANT : navbar fixed-top => padding juste nécessaire, sans “gros blanc” */
.pal-container{
  padding-top: 92px; /* si encore coupé: 100 ; si trop d’espace: 85 */
}

/* Titre : petit, lisible, collé sous la navbar */
.pal-title{
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  color: #111;
  font-size: 1.05rem !important;
  line-height: 1.05 !important;
  font-weight: 700;
}

/* Bloc principal : un peu plus compact (moins de “cadre blanc”) */
.pal-stage{
  background: var(--pal-card);
  border: 1px solid var(--pal-border);
  padding: 12px;     /* était 18 */
  margin-top: 0;     /* pas de marge inutile sous le titre */
}

/* Disposition : SEULEMENT haut / tableau / bas (plus d'intermédiaires) */
.pal-layout{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 6px;          /* était 10 */
  align-items: center;
}

.pal-top{    grid-column: 1; grid-row: 1; }
.pal-center{ grid-column: 1; grid-row: 2; }
.pal-bottom{ grid-column: 1; grid-row: 3; }

/* Tableau : zone plus compacte */
.pal-painting-area{
  display: grid;
  place-items: center;
  padding: 6px;      /* était 12 */
}

/* Image :
   - plus de transform (ça ne réduit pas le cadre)
   - réduction réelle via max-width selon orientation (classes mises par JS)
*/
#palPainting{
  max-width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}

/* Paysage : -15% => 85% */
.pal-landscape #palPainting{
  max-width: 85%;
}

/* Portrait : -25% => 75% */
.pal-portrait #palPainting{
  max-width: 75%;
}

/* Palettes : UNE SEULE LIGNE en haut et en bas (pas de wrap)
   + moins de “grandes marges blanches”
*/
.pal-row{
  display: flex;
  gap: 8px;           /* était 10 */
  justify-content: center;
  flex-wrap: nowrap;  /* interdit 2e rangée */
  overflow-x: auto;   /* si écran étroit : scroll horizontal */
  padding: 4px 0;     /* était 8px 0 */
}

/* Carrés -40% (74 -> 44) */
.pal-swatch{
  width: 44px;
  height: 44px;
  border: 2px solid var(--pal-frame);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  background: #ccc;
}