/* =========================
   STRUCTURE PRINCIPALE
   ========================= */
.demandebackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url("/img/emby.jpg") repeat-x center center;
  opacity: 0;
  animation:
    fadeIn 1s ease forwards 0.5s,
    scrollBackground 30s linear infinite;
}

@keyframes scrollBackground {
  from { background-position-x: 0; }
  to { background-position-x: -2240px; }
}

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

.admin {
  position: fixed;
  bottom: 25px;
  right: 25px;
  opacity: 25%;
  text-decoration: none;
  color: #fff;
  size: 0.5em;
  transition: 0.5s;
}

.admin:hover{
  opacity: 50%;
}

.fullsize{
  flex-direction: row;
  flex-wrap: wrap;
}
/* =========================
   Formulaire
   ========================= */
/* === Sélection du type === */
.mode-select{
  display:flex;
  justify-content: center;
  gap:10px;
  margin-bottom:14px
}

.mode-btn{
  padding:10px 14px;
  border-radius:20px;
  background: rgba(0, 0, 0, 0.95);
  cursor:pointer;
  font-weight:600;
  color: #fff;
  border: none; 
  outline: none;
}

.mode-btn.active{
  background: rgb(255, 125, 0);
  color:white;
  box-shadow:0 0px 18px rgba(255, 106, 0, 0.8);
}

.mode-btn:hover {
  background: rgb(255, 125, 0, 0.3);
  transform: scale(1.05);
  box-shadow: 0 0px 12px rgba(255, 125, 0, 0.3);
}

/* === Recherche === */
.search-area{
  position:relative
}

.results-list{
  list-style:none;
  margin:0;
  padding:6px 0;
  max-height:320px;
  overflow:auto;
  border-radius:20px;
  background: rgba(0, 0, 0, 0.95);
}

.results-list li{
  display:flex;
  gap:10px;
  padding:8px;
  align-items:center;
  cursor:pointer;
}
.results-list li:hover{
  background: rgb(255, 125, 0, 0.3);
  box-shadow: 0 0px 12px rgba(255, 125, 0, 0.3);
}
.results-list img{width:48px;height:72px;object-fit:cover;border-radius:4px}

.h-captcha {
  margin-top: 0.5em;
  transform: scale(0.9);
}

/* === Objet sélectionné === */

.selected-block{
  display:flex;
  gap:16px;
  min-height: 200px;
  border-radius:20px;
  background: rgba(0, 0, 0, 0.95);
  margin-top:12px;
  justify-content:space-between;
  align-items:center;
  overflow: hidden;
}
.selected-left img{
  height:200px;
  object-fit:cover;
  border-radius:20px;
}
.selected-right h2{margin:0 0 6px;font-size:1.1rem}
.selected-right p{margin:6px 0;color:var(--muted)}

.change-btn{
  padding:20px;
  height: 200px;
  border-radius:20px;
  color: #fff;
  background: rgb(255, 125, 0, 0.5);
  cursor:pointer;
  border: none; 
  outline: none;
}

.change-btn:hover {
  background: rgb(255, 125, 0, 0.3);
  box-shadow: 0 0px 12px rgba(255, 125, 0, 0.3);
}

.season-checkboxes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  margin-bottom: 10px;
}
.season-checkboxes label{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.season-checkboxes label input{
  display: none;
}
.season-checkboxes label span{
  user-select: none;
  cursor: pointer;
  font-weight:600;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 10px;
}
.season-checkboxes label span:hover{
  user-select: none;
  cursor: pointer;
  background: rgb(255, 125, 0, 0.3);
  transform: scale(1.05);
  box-shadow: 0 0px 12px rgba(255, 125, 0, 0.3);
}
.season-checkboxes label input:checked + span{
  background: rgb(255, 125, 0);
  box-shadow:0 0px 18px rgba(255, 106, 0, 0.8);
}

/* === Texte area === */

#problemDetails{
  width:100%;
  padding:10px;
  margin-top: 15px;
  border-radius:20px;
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
  border: none; 
  outline: none;
  resize: none;
}

#problemDetails:hover {
  background: rgb(255, 125, 0, 0.3);
  box-shadow: 0 0px 12px rgba(255, 125, 0, 0.3);
}

#problemDetails:focus{
  background: rgb(255, 125, 0);
  color:white;
  box-shadow:0 0px 18px rgba(255, 106, 0, 0.8);
}

/* === Submit === */

.form-actions{
  margin-top:16px;
}
#submitBtn{
  padding:10px 16px;
  border-radius:20px;
  color: #fff;
  background: rgb(255, 125, 0, 0.5);
  font-weight:700;
  cursor:pointer;
  border: none; 
  outline: none;
}
#submitBtn:hover{
  background: rgb(255, 125, 0, 0.3);
  box-shadow: 0 0px 12px rgba(255, 125, 0, 0.3);
  font-weight:700;
  cursor:pointer;
  border: none; 
  outline: none;
}
#submitBtn[disabled]{
  color: #808080;
  background: rgba(255, 255, 255, 0.2);
  cursor:not-allowed
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.field-bubble{
  margin-top:6px;
  padding:8px 10px;
  border-radius:8px;
  background: rgba(255, 255, 255, 0.2);
  border:1px solid rgba(0,0,0,0.06);
  color:#663d00;
  font-size:0.95rem;
}
.field-bubble.hidden{display:none}

/* =========================
   liste ajouts et demandes
   ========================= */

.mediabox {
  display: flex;
  background: rgba(0, 0, 0, 0.95);
  width: 100%;
  border-radius: 20px;
  min-height: 100px;
  align-items: center;
}

.mediabox:hover {
  box-shadow: 0 0px 12px rgba(255, 125, 0, 0.3);
  background: rgb(255, 125, 0, 0.3);
}

.mediabox img{
  height: 100px;
  border-radius: 20px;
}

.mediainfo {
  width: 100%;
  padding: 0 20px;
}

/* =========================
   MEDIA QUERIES
   ========================= */