/* ============================================ */
/* stylemetapost.css — Spécifique au générateur */
/* de code MetaPost (repere.html)               */
/* Nécessite style.css en complément            */
/* ============================================ */

/* ============================================ */
/* LAYOUT — colonne unique                      */
/* ============================================ */
#layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 1em;
}

/* ============================================ */
/* PANNEAU DE CONFIGURATION                     */
/* ============================================ */
#config-panel {
  background-color: var(--color-panel-bg);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Onglets */
.tabs-header {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #ddd;
  margin-bottom: 1em;
}

/* Caché sur desktop */
.tabs-select { display: none; }

.tab-btn {
  background: none;
  padding: 0.8em 1.2em;
  font-size: 1em;
  color: #555;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  flex: 1 1 auto;
  text-align: center;
}

.tab-btn:hover { background-color: #eee; color: #333; }
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: bold;
}

/* Contenu des onglets */
.tab-content { display: none; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================ */
/* FORMULAIRE — onglet Repère                   */
/* ============================================ */
.form-group {
  margin-bottom: 0.8em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}
.form-group label { font-weight: 500; }

.form-group input[type="number"] {
  padding: 0.4em;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  width: 4em;
}

/* Lignes du repère (hors .scrollable-area) */
.form-row {
  display: flex;
  column-gap: 1em;
  row-gap: 0.3em;
  margin-bottom: 0.3em;
  flex-wrap: wrap;
  align-items: center;
}

.checkbox-row { margin-top: 0.3em; }

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.3em;
  cursor: pointer;
}

/* ============================================ */
/* BARRE D'ACTION                               */
/* ============================================ */
.action-bar {
  margin-top: 1em;
  text-align: left;
}

/* ============================================ */
/* ZONE DÉFILANTE DES POINTS / DROITES          */
/* ============================================ */
.scrollable-area {
  max-height: 240px;
  border: 1px solid #eee;
  overflow-y: auto;
  /* Pas de overflow-x:hidden → évite de couper les tooltips */
  padding: 0.5em;
  margin-bottom: 0.5em;
  background: #fff;
}

/* ============================================ */
/* LIGNES POINTS / DROITES                      */
/*                                              */
/* Grid 2 lignes :                              */
/*   ligne 1 : main                    |  ×     */
/*   ligne 2 : opts (opt-a + opt-b)    |  opts  */
/* ============================================ */

.scrollable-area .form-row {
  display: grid;
  grid-template-areas:
    "main   remove"
    "opts   opts";
  grid-template-columns: 1fr auto;
  gap: 0.3em 0.5em;
  align-items: start;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #f0f0f0;
}

.scrollable-area .form-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.row-main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}

/* Wrapper flex qui contient opt-a et opt-b côte à côte */
.row-opts {
  grid-area: opts;
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}

.row-options-a,
.row-options-b {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  font-size: 0.88em;
}

.row-remove {
  grid-area: remove;
  display: flex;
  justify-self: end;
  align-self: start;
  padding-top: 0.1em;
}

/* Largeurs des champs */
.obj-name     { width: 5em;   flex: none; }
.obj-def      { width: 5em;   flex: none; }
.point-pos    { width: 3em;   flex: none; }
.width-droite { width: 3.5em; flex: none; }
.style-droite { flex: none; }
.choix-couleur{ width: 4em; padding: 2px; height: 2em; flex: none }
.courbe-def { flex: 1; max-width: 500px; }

.point-label { font-size: 0.85em; white-space: nowrap; }
.dess-label  { font-size: 0.85em; font-weight: 500; white-space: nowrap; }

.groupe { display: flex; align-items: center; gap: 1ex; }

/* ============================================ */
/* TOOLTIPS — tooltip volant en position: fixed */
/* ============================================ */
.input-with-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

#tooltip-flying {
  position: fixed;
  z-index: 9999;
  max-width: 220px;
  background-color: #444;
  color: #fff;
  font-size: 0.82em;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  pointer-events: none;
  white-space: normal;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#tooltip-flying.visible { opacity: 1; }

#tooltip-flying::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #444;
}
#tooltip-flying.below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #444;
}

/* ============================================ */
/* RESPONSIVE — tablette (≤ 900px)              */
/* ============================================ */
@media (max-width: 900px) {
  .tab-btn { padding: 0.6em 0.8em; font-size: 0.9em; }
  .form-group input[type="number"] { width: 4.5em; }
  /* Le grid 2 lignes du desktop convient déjà pour la tablette — rien à changer */
}

/* ============================================ */
/* RESPONSIVE — mobile (≤ 600px)                */
/* ============================================ */
@media (max-width: 600px) {
  .tab-btn { padding: 0.5em; font-size: 0.85em; min-width: 4em; }
  #config-panel .tabs-header { display: none; }
  .tabs-select { display: block; margin-bottom: 1em; }
  .tabs-select select {
    width: 100%;
    padding: 0.55em 0.8em;
    font-size: 15px;
    border: 0.5px solid #ccc;
    border-radius: 6px;
  }
  .att-gen { flex-basis: 100%; }

  .scrollable-area {
    max-height: none;
    overflow-y: visible;
  }

  /* Sur mobile : row-opts éclate en 2 sous-lignes + le × se glisse entre */
  .scrollable-area .form-row {
    grid-template-areas:
      "main   main"
      "opt-a  remove"
      "opt-b  opt-b";
    grid-template-columns: 1fr auto;
  }

  /* row-opts passe en contents : opt-a et opt-b participent au grid parent */
  .row-opts { display: contents; }

  .row-options-a { grid-area: opt-a; }
  .row-options-b { grid-area: opt-b; }
  .row-remove    { align-self: center; }

  .obj-name  { width: 4.5em; }
  .obj-def   { width: 4em; }
  .point-pos { width: 2em; }
  .form-group input[type="number"] { width: 4em; }
}