/* 
  /$$$$$$                                          /$$      
 /$$__  $$                                        | $$      
| $$  \__/  /$$$$$$   /$$$$$$   /$$$$$$   /$$$$$$$| $$$$$$$ 
|  $$$$$$  /$$__  $$ |____  $$ /$$__  $$ /$$_____/| $$__  $$
 \____  $$| $$$$$$$$  /$$$$$$$| $$  \__/| $$      | $$  \ $$
 /$$  \ $$| $$_____/ /$$__  $$| $$      | $$      | $$  | $$
|  $$$$$$/|  $$$$$$$|  $$$$$$$| $$      |  $$$$$$$| $$  | $$
 \______/  \_______/ \_______/|__/       \_______/|__/  |__/
 */

 .Ajout {
  text-align: center;
  width: fit-content;
  max-width: 80%;
  margin: 25px auto;
  padding: 1rem 2rem 2rem 2rem;
  background: rgb(54, 178, 209);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
  font-family: 'Segoe UI', sans-serif;
}

.Ajout h2{
  color: rgb(255, 255, 255);
  font-size: 2em;
}

.Ajout label, h3 {
  font-size: 1.1em;
  display: block;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
}

.Ajout .checkbox-btn, .ajoutType .radio-btn, .radio-group .radio-btn{
  margin: 1px;
}

.Ajout .nom {
  margin-top: 5px;
}

.Ajout input[type="number"],
.Ajout input[type="submit"],
.Ajout input, textarea {
  width: 50%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid rgb(0, 35, 190);
  border-radius: 8px;
  transition: border 0.3s ease;
}

.Ajout input[type="submit"] {
  display: inline-block;
  width: fit-content;
  padding: 10px 75px 10px 75px;
  margin: auto;
  
}

.Ajout input[type="number"]:focus {
  border-color: rgb(0, 26, 255);
  outline: none;
}

.Ajout input[type="checkbox"],
.Ajout input[type="radio"] {
  margin-right: 0.5rem;
}

.Ajout input[type="submit"] {
  display: block;
  margin: 1rem auto 0 auto;
  padding: 10px 100px;
  background-color: rgb(16, 56, 233);
  color: white;
  font-weight: bold;
  font-size: 1rem;
  border: 1px solid rgb(0, 35, 190);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.Ajout input[type="submit"]:hover {
  background-color: rgb(28, 70, 255);
  transition: 0.15s ease;
}

@media (max-width: 450px) {
  .Ajout {
    text-align: center;
    padding: 0.5rem 1rem 1rem 1rem;
  }

  .checkbox-btn span, .checkbox-btn, .ajoutType .radio-btn span, .ajoutType .radio-btn {
    width: 75%;
  }

  .radio-btn {
    width: fit-content;
  }

  .radio-group, .checkbox-group {
    justify-content: center;
  }

  .item {
    justify-content: center;
    margin: 0px;
  }
}

.noResultsMessage {
  margin: 25px;
  font-size: 1.25em;
  text-align: center;
  display: none; 
  color: red; 
  font-weight: bold;
}

label .sousQuestion{
  font-size: 0.5em;
}

/* 
  /$$$$$$  /$$                           /$$       /$$                          
 /$$__  $$| $$                          | $$      | $$                          
| $$  \__/| $$$$$$$   /$$$$$$   /$$$$$$$| $$   /$$| $$$$$$$   /$$$$$$  /$$   /$$
| $$      | $$__  $$ /$$__  $$ /$$_____/| $$  /$$/| $$__  $$ /$$__  $$|  $$ /$$/
| $$      | $$  \ $$| $$$$$$$$| $$      | $$$$$$/ | $$  \ $$| $$  \ $$ \  $$$$/ 
| $$    $$| $$  | $$| $$_____/| $$      | $$_  $$ | $$  | $$| $$  | $$  >$$  $$ 
|  $$$$$$/| $$  | $$|  $$$$$$$|  $$$$$$$| $$ \  $$| $$$$$$$/|  $$$$$$/ /$$/\  $$
 \______/ |__/  |__/ \_______/ \_______/|__/  \__/|_______/  \______/ |__/  \__/

*/

.checkbox-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.checkbox-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 0px;
}

.checkbox-btn input[type="checkbox"] {
  display: none;
}

.checkbox-btn span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 2px solid rgb(0, 21, 206);
  border-radius: 8px;
  color: rgb(0, 21, 206);
  font-weight: bold;
  transition: all 0.3s ease;
}

.checkbox-btn span:hover {
  background-color: rgb(0, 78, 222);
  color: rgb(255, 255, 255);
  transition: 0.15s ease;
}

.checkbox-btn:has(input:checked) span {
  background-color: rgb(0, 21, 206);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.checkbox-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* 
 /$$$$$$$                  /$$ /$$          
| $$__  $$                | $$|__/          
| $$  \ $$  /$$$$$$   /$$$$$$$ /$$  /$$$$$$ 
| $$$$$$$/ |____  $$ /$$__  $$| $$ /$$__  $$
| $$__  $$  /$$$$$$$| $$  | $$| $$| $$  \ $$
| $$  \ $$ /$$__  $$| $$  | $$| $$| $$  | $$
| $$  | $$|  $$$$$$$|  $$$$$$$| $$|  $$$$$$/
|__/  |__/ \_______/ \_______/|__/ \______/ 
*/

.radio-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.radio-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 0px;
}

.radio-btn input[type="radio"] {
  display: none;
}

.radio-btn span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 2px solid rgb(0, 21, 206);
  border-radius: 8px;
  color: rgb(0, 21, 206);
  font-weight: bold;
  transition: all 0.3s ease;
}

.radio-btn span:hover {
  background-color: rgb(0, 78, 222);
  color: rgb(255, 255, 255);
  transition: 0.15s ease;
}

.radio-btn:has(input:checked) span {
  background-color: rgb(0, 21, 206);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 
 /$$$$$$$              /$$              
| $$__  $$            | $$              
| $$  \ $$  /$$$$$$  /$$$$$$    /$$$$$$ 
| $$  | $$ |____  $$|_  $$_/   /$$__  $$
| $$  | $$  /$$$$$$$  | $$    | $$$$$$$$
| $$  | $$ /$$__  $$  | $$ /$$| $$_____/
| $$$$$$$/|  $$$$$$$  |  $$$$/|  $$$$$$$
|_______/  \_______/   \___/   \_______/
*/

.ajoutDate {
  font-family: 'Segoe UI', sans-serif;
}

.date {
  background: rgb(114, 202, 224);
  padding: 12px 15px 12px 15px;
  font-size: 1rem;
  border: 2px solid rgb(0, 21, 206);
  border-radius: 8px;
  color: rgb(0, 21, 206);
  font-weight: bold;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.date:hover{
  background-color: rgb(0, 78, 222);
  color: rgb(255, 255, 255);
  transition: 0.15s ease;
}

.date:focus {
  border-color: rgb(0, 0, 0);
  box-shadow: 20px rgba(255, 255, 255);
  outline: none;
}

.date option {
  padding: 8px 12px;
  background-color: rgb(100, 162, 255);
  color: rgb(0, 0, 0);
  font-weight: bold;
  text-align: center;
}

.date option:hover {
  background-color: rgb(0, 21, 206);
}

.date option:checked {
  background-color: rgb(0, 21, 206);
  color: rgb(255, 255, 255);
}

/* 
  /$$$$$$                        /$$               /$$                              
 /$$__  $$                      | $$              |__/                              
| $$  \__/  /$$$$$$  /$$$$$$$  /$$$$$$    /$$$$$$  /$$ /$$$$$$$   /$$$$$$   /$$$$$$ 
| $$       /$$__  $$| $$__  $$|_  $$_/   |____  $$| $$| $$__  $$ /$$__  $$ /$$__  $$
| $$      | $$  \ $$| $$  \ $$  | $$      /$$$$$$$| $$| $$  \ $$| $$$$$$$$| $$  \__/
| $$    $$| $$  | $$| $$  | $$  | $$ /$$ /$$__  $$| $$| $$  | $$| $$_____/| $$      
|  $$$$$$/|  $$$$$$/| $$  | $$  |  $$$$/|  $$$$$$$| $$| $$  | $$|  $$$$$$$| $$      
 \______/  \______/ |__/  |__/   \___/   \_______/|__/|__/  |__/ \_______/|__/      
*/

.nomContainer input, .nomBisContainer input{
  width: 500px;
}

.recommandationContainer input{
  width: 500px;
}

.coverContainer input, .bannerContainer input{
  width: 300px;
}

.synopsisContainer textarea{
  width: 500px;
  height: 100px;
  resize: none;
}

.nom-nomBis-container, .recommandationContainer, .synopsisContainer, .ajoutType{
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.groupe{
  background-color: rgb(114, 202, 224);
  margin-bottom: 25px;
  border-radius: 20px;
  padding: 35px;
}

.saison-annee-container {
  padding: 0px 15% 0px 15%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  gap: 50px;
}

.cover-banner-container {
  padding: 0px 15% 0px 15%;
  margin: auto auto 2rem auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  gap: 25px;
}

.saison-annee-container, .cover-banner-container > div {
  flex: 1;
  min-width: 100px;
}

/* 
 /$$$$$$$                                  /$$     /$$$$$$$              /$$       /$$                        
| $$__  $$                                | $$    | $$__  $$            | $$      | $$                        
| $$  \ $$  /$$$$$$   /$$$$$$$  /$$$$$$  /$$$$$$  | $$  \ $$ /$$   /$$ /$$$$$$   /$$$$$$    /$$$$$$  /$$$$$$$ 
| $$$$$$$/ /$$__  $$ /$$_____/ /$$__  $$|_  $$_/  | $$$$$$$ | $$  | $$|_  $$_/  |_  $$_/   /$$__  $$| $$__  $$
| $$__  $$| $$$$$$$$|  $$$$$$ | $$$$$$$$  | $$    | $$__  $$| $$  | $$  | $$      | $$    | $$  \ $$| $$  \ $$
| $$  \ $$| $$_____/ \____  $$| $$_____/  | $$ /$$| $$  \ $$| $$  | $$  | $$ /$$  | $$ /$$| $$  | $$| $$  | $$
| $$  | $$|  $$$$$$$ /$$$$$$$/|  $$$$$$$  |  $$$$/| $$$$$$$/|  $$$$$$/  |  $$$$/  |  $$$$/|  $$$$$$/| $$  | $$
|__/  |__/ \_______/|_______/  \_______/   \___/  |_______/  \______/    \___/     \___/   \______/ |__/  |__/
*/

.resetButton {
  display: block;
  text-align: center;
  margin: 1rem auto 0 auto;
  background-color: rgb(255, 255, 255);
  color: rgb(16, 56, 233);
  font-weight: bold;
  width: fit-content;
  padding: 7.5px;
  font-size: 0.75rem;
  border: 2px solid rgb(0, 35, 190);
  border-radius: 10px;
}

.resetButton:hover{
  background-color: rgb(53, 90, 255);
  color: rgb(255, 255, 255);
  transition: 0.15s ease;
}