body{
  background-color:rgb(247,246,241);
}
h1{
  margin-left: 20px;
  color: #538ee7;
}

#moyennesAnnée{
  margin-left: 20px;
}

.matiere{
  margin-left: 20px;
  color: chocolate;
  text-decoration: underline overline chocolate;
}

.epreuves{
  margin-left: 20px;
  color: rgb(30, 114, 210);
text-decoration: underline overline rgb(30, 114, 210);
}

/*-- mise en forme du fieldset Option facultative--*/
.optionAnnuelle {
  box-sizing: border-box;
  margin: 0 0 0 20px;
  width: 90%;
  max-width: 900px;
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 10px;
}

/* Légende */
.optionAnnuelle legend {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0px;
  margin-left: 10px; /* ✅ Écarte les inputs du haut */
}

#rappel{
margin-bottom: 10px;
font-style: italic;
margin-left: 0;
}

/* Labels + Inputs en ligne */
.optionAnnuelle label,
.optionAnnuelle input[type="text"] {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-bottom: 8px;
}

/* Marges spécifiques */
label[for="trimestre1"],
label[for="trimestre2"],
label[for="trimestre3"],
label[for="moyenneOption"],
label[for="bonus"] {
  margin-left: 10px;
}

/* Inputs */
.optionAnnuelle input[type="text"] {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 120px;
  margin-left: 6px; /* ✅ Écarte légèrement l’input du label */
}


div{
  margin-left: 20px;
  margin-top: 0px;
  padding-top: 0px;
}

#moyenneGlobale{
  margin: 20px;
  font-weight: bold;
  border: 2px solid rgb(19,179,207);
  box-sizing: border-box;
  width: 90%;
  max-width: 900px;
  border-radius: 5px;
  height: fit-content;
  font-size: 20px;
  padding: 5px 5px;
  color: rgb(19, 179, 207);

}

button{
  margin-left: 20px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: white;
  border: none;
  padding: 0.8em 1.5em;
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 0 #0e7490;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #0e7490;
}

/*--mise en forme du cadre bleu récapitulatif--*/
.recap{
  margin-left: 20px;
}

.bilan{
  box-sizing: border-box;
  width: 90%;
  max-width: 900px;
  margin: 20px 0 20px 20px;
  background-color: rgba(0, 255, 255, 0.103);
  font-weight: bold;
  font-size: 20px;
  border: 2px solid rgb(70, 45, 212);
  border-radius: 5px;
  padding: 10px 0px 10px 10px;
}

.bilan .separateur {
  display: block;
  height: 1px;
  background-color: rgb(70, 45, 212);
  margin: 15px 0 0 0;
}

/*--mise en forme du cadre mode de calcul--*/
.explications{
  box-sizing: border-box;
  width: 90%;
  max-width: 900px;
  margin: 0 0 0 20px;
  padding: 10px 10px 10px 10px;;
  font-size: 14px;
  background-color: rgba(180, 241, 216, 0.199);
  border: 1px solid rgb(0, 192, 32)
}

/*--mise en forme du tabvleau des matières--*/
.table1 {
  border-collapse: collapse;
  width: 90%;
  max-width: 900px;
  margin: 20px 0 20px 20px;
  font-family: Arial, sans-serif;
  /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
  background-color: rgba(253, 237, 218, 0.363);
}

.table1 th, .table1 td {
  border: 1px solid #e7a453;
  padding: 5px;
  text-align: center;
  font-size: 14px;
}

.table1 th {
  background-color: #fad5ab;
}

/* Colonne 1 : Nom de la ligne (réduite au maximum) */
.table1 th:nth-child(1),
td:nth-child(1) {
  width: 90px; /* 👈 réduit davantage */
  text-align: left;
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colonnes Tr1, Tr2, Tr3 : très étroites */
.table1 th:nth-child(2),
.table1 td:nth-child(2),
.table1 th:nth-child(3),
.table1 td:nth-child(3),
.table1 th:nth-child(4),
.table1 td:nth-child(4) {
  width: 70px;
  text-align: center;
}
.table1 th:nth-child(5),
.table1 td:nth-child(5) {
  width: 70px;
}

input[type="text"] {
  width: 100%;
  max-width: 70px;
  padding: 3px;
  box-sizing: border-box;
  text-align: center;
}

/* Champ plus large dans la dernière colonne */
.table1 td:nth-child(5) input[type="text"] {
  max-width: 70px;
  text-align: left;
}


/* mise en forme du tableau des épreuve finales */
.table2 {
  border-collapse: collapse;
  width: 90%;
  max-width: 900px;
  margin: 20px 0 20px 20px;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background-color: rgba(235, 240, 255, 0.952);
}

.table2 th, .table2 td {
  border: 1px solid #5355e7;
  padding: 5px;
  text-align: center;
  font-size: 14px;
}

.table2 th {
  background-color: #c8c0f571;
}

/* Colonne 1 : Nom de la ligne (réduite au maximum) */
.table2 th:nth-child(1),
.table2 td:nth-child(1) {
  width: 90px; /* 👈 réduit davantage */
  text-align: left;
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colonnes Tr1, Tr2, Tr3 : très étroites */
.table2 th:nth-child(2),
.table2 td:nth-child(2),
.table2 th:nth-child(3),
.table2 td:nth-child(3),
.table2 td:nth-child(3) {
  width: 70px;
  text-align: center;
}


input[type="text"] {
  width: 100%;
  max-width: 70px;
  padding: 3px;
  box-sizing: border-box;
  text-align: center;
}

/* Champ plus large dans la dernière colonne */
.table2 td:nth-child(3) input[type="text"] {
  max-width: 70px;
  text-align: left;
}



/* --- Responsive --- */

/* tableau des matières*/
@media screen and (max-width: 768px) {
  table {
    width: 100%;
    font-size: 13px;
  }

  th, td {
    padding: 5px;
  }

  input[type="text"] {
    width: 100%;
  }

  th:nth-child(1),
  td:nth-child(1) {
    width: 60px;
  }

  th:nth-child(2),
  td:nth-child(2),
  th:nth-child(3),
  td:nth-child(3),
  th:nth-child(4),
  td:nth-child(4) {
    width: 30px;
  }
}

@media screen and (max-width: 480px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: contents;
  }

  tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    background-color: #fafafa;
  }

  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    padding: 6px 0;
  }

  td::before {
    content: attr(data-label);
    font-weight: bold;
    text-align: left;
  }

  input[type="text"] {
    width: 60%;
  }
}


/* --- Responsive 768px --- */

@media screen and (max-width: 768px) {
  .optionAnnuelle {
    font-size: 13px;
    width: 90%;

  }

  .optionAnnuelle input[type="text"] {
    width: 100%;
  }
}




/* --- Responsive 480px --- */

@media screen and (max-width: 480px) {
  .optionAnnuelle .ligne {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    background-color: #fafafa;
  }

  .optionAnnuelle label {
    display: none;
  }

  .optionAnnuelle input[type="text"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60%;
    font-size: 13px;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .optionAnnuelle input[type="text"]::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: auto;
    text-align: left;
  }
}



/*--------------------------------------------------------------------------*/