/* Centrage global */
main {
  display: flex; -webkit-flex: flex; -webkit-flex: flex; -ms-flex: flex; -ms-flexbox: flex;
  flex-direction: column;
  align-items: center; -ms-align-items: center;
  padding: 30px;
  margin-top: calc(var(--header-h) + 20px); /* Décale le contenu sous la barre de navigation */
}

/* Titres des sections */
.section-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #aa0055;
  padding: 10px 15px;
  margin: 20px 0 10px;
  border-left: 6px solid #aa0055;
  border-bottom: 3px solid #aa0055;
  box-shadow: -4px 0px 8px rgba(170, 0, 85, 0.3), 0 4px 8px rgba(170, 0, 85, 0.3); 
  -webkit-box-shadow: -4px 0px 8px rgba(170, 0, 85, 0.3), 0 4px 8px rgba(170, 0, 85, 0.3);
}

/* Carrousel */
.box-wrapper {
  display: flex; -webkit-flex: flex; -webkit-flex: flex; -ms-flex: flex; -ms-flexbox: flex;
  align-items: center; -ms-align-items: center;
}

.box-container {
  display: flex; -webkit-flex: flex; -webkit-flex: flex; -ms-flex: flex; -ms-flexbox: flex;
  flex-wrap: nowrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap;
  gap: 10px;
  overflow: hidden;
  max-width: 520px; /* desktop: 4 éléments */
}

@media (max-width: 600px) {
  .box-container {
    max-width: 260px; /* mobile: 2 éléments */
  }
}

.point-box {
  background: linear-gradient(135deg, #d3f796, #fdd49a);
  border: 2px solid #ff9800;
  border-radius: 50px; -webkit-border-radius: 50px;
  padding: 10px 15px;
  cursor: pointer; -webkit-cursor: pointer;
  min-width: 120px;
  text-align: center;
  transition: transform 0.2s ease; -webkit-transition: transform 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.point-box:hover {
  transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05);
  background: linear-gradient(135deg, #c4f67d, #ffcd85);
}

/* Flèches */
.nav-arrow {
  font-size: 24px;
  cursor: pointer; -webkit-cursor: pointer;
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
  padding: 10px;
  color: #007acc;
}

/* === FORMULAIRE LIGNE === */
#lineset {
  width: 100%;
  display: flex; -webkit-flex: flex; -webkit-flex: flex; -ms-flex: flex; -ms-flexbox: flex;
  justify-content: center; -webkit-justify-content: center;
  margin-top: 30px; /* espace avec les listes */
}

#lineset form {
  background: linear-gradient(135deg, #fda85f, #ffd65a);
  border: 3px solid #ff66cc;
  border-radius: 15px; -webkit-border-radius: 15px;
  padding: 20px;
  margin-top: 20px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 10px 20px rgba(255, 105, 180, 0.3); -webkit-box-shadow: 0 10px 20px rgba(255, 105, 180, 0.3);
  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
}

@media (max-width: 600px) {
  #pointset form {
    max-width: 260px;
  }
}

/* Champs */
#lineset form input[type="text"],
#lineset form input[type="number"] {
  width: 100%;
  padding: 8px 12px;
  margin-top: 6px;
  margin-bottom: 12px;
  border: 1px solid #ff66cc;
  border-radius: 8px; -webkit-border-radius: 8px;
  font-family: monospace;
  font-size: 1rem;
  background-color: #fffaf0;
}

/* Glow text et titres internes */
#lineset form label,
#lineset form legend {
  color: #cc3300; /* rouge jauni */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 153, 0, 0.4); -webkit-text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 153, 0, 0.4);
  font-weight: bold;
}

/* Bouton de soumission */
#lineset form button {
  background-color: #ff8c42;
  color: white;
  border: 2px solid #ff66cc;
  padding: 10px 20px;
  border-radius: 8px; -webkit-border-radius: 8px;
  cursor: pointer; -webkit-cursor: pointer;
  font-size: 1.1rem;
  transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease;
}

/* Bouton "Ajouter la ligne" */
#lineset form button[type="submit"] {
  display: block;
  margin: 2rem auto;  /* Centré horizontalement et espacé verticalement */
  font-size: 1.5rem;  /* Agrandissement de la taille du texte */
  padding: 1rem 2rem;  /* Taille des bordures ajustée */
  border-radius: 0.75rem;
  cursor: pointer;
  background-color: #ff8c42;  /* Couleur de fond attrayante */
  color: white;
  font-weight: bold;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3); /* Ombre autour du bouton */
}

/* Au survol du bouton */
#lineset form button[type="submit"]:hover {
  background-color: #e27330;
  transform: scale(1.1); /* Effet d'agrandissement au survol */
}

#draw__area {
  display: block; -webkit-flex: block; -webkit-flex: block; -ms-flex: block; -ms-flexbox: block;
  margin: 20px auto;
  max-width: 90vw;
  max-height: 90vh;
  aspect-ratio: 1 / 1;
  background-color: #fefefe;
  border: 2px dashed rgba(0, 0, 0, 0.1);
}

.line-meta {
  display: flex; -webkit-flex: flex; -webkit-flex: flex; -ms-flex: flex; -ms-flexbox: flex;
  justify-content: space-between; -webkit-justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

/* Centre le bouton “Ajouter la ligne” et triple sa taille */
#line__form button[type="submit"] {
  display: block; -webkit-flex: block; -webkit-flex: block; -ms-flex: block; -ms-flexbox: block;          /* pour que margin auto fonctionne */
  margin: 2rem auto;       /* centré horizontalement et espacé verticalement */
  font-size: 3rem;         /* 3× la taille de base */
  padding: 1rem 2rem;      /* ajustez selon vos goûts */
  border-radius: 0.5rem; -webkit-border-radius: 0.5rem;   /* coins arrondis un peu plus généreux */
  cursor: pointer; -webkit-cursor: pointer;         /* pointeur quand on passe dessus */
  transition: transform 0.2s ease; -webkit-transition: transform 0.2s ease;
}

#line__form button[type="submit"]:hover {
  transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05);  /* léger effet au survol */
}

.alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px; -webkit-border-radius: 4px;
}
.alert-success {
  background: #e5ffe5;
  border: 1px solid #a0ffa0;
  color: #007a00;
}
.alert-danger {
  background: #ffe5e5;
  border: 1px solid #ffa0a0;
  color: #a60000;
}
#flash-message {
  position: sticky;
  top: 0;
  z-index: 1001;
}

/* wrapper pour aligner deux petits champs côte à côte */
.small-fields-row {
  display: flex; -webkit-flex: flex; -webkit-flex: flex; -ms-flex: flex; -ms-flexbox: flex;
  gap: 2rem;           /* espace entre posX/posY et longueur/angle */
  margin-bottom: 1rem; /* espace sous la ligne */
}

/* chaque petit champ : label au-dessus, input dessous */
.small-field {
  display: flex; -webkit-flex: flex; -webkit-flex: flex; -ms-flex: flex; -ms-flexbox: flex;
  flex-direction: column;
  align-items: flex-start; -ms-align-items: flex-start;
}

/* labels normaux pour rester lisibles */
.small-field label {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

/* inputs fit-content, 3× plus petits que le label */
.small-field input {
  width: fit-content;
  font-size: 0.333rem;      /* 1rem / 3 */
  padding: 0.2em 0.4em;
  transition: font-size 0.2s ease; -webkit-transition: font-size 0.2s ease;
}

/* au survol du champ ou du wrapper, on agrandit un peu l’input */
.small-field:hover input,
.small-field input:hover {
  font-size: 0.5rem;        /* 1rem / 2 */
}