:root {
  --as-accent: #f6c233;
  --as-bg: #111;
  --as-panel: #1c1c1c;
  --as-border: #2b2b2b;
  --as-text: #eee;
  --as-muted: #bbb;

  /* Couleurs Jean-Claude */
  --jc-red: #DA4F4A;
  --jc-pink: #E94B66;
}

/* Wrapper et titres */
.album-survey-wrapper {
  background: var(--as-bg);
  color: var(--as-text);
  padding: 1.2rem 1.2rem 2rem;
  border: 1px solid #232323;
  border-radius: 12px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.album-survey-wrapper h2 {
  text-align: center;
  margin-top: 0;
  font-size: 1.9rem;
}

.survey-intro {
  text-align: center;
  color: var(--as-muted);
  font-size: .9rem;
  max-width: 760px;
  margin: .5rem auto 1.2rem;
}

/* Grille des morceaux */
.tracks-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width:900px) {
  .tracks-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.track-block {
  background: var(--as-panel);
  border: 1px solid var(--as-border);
  border-radius: 10px;
  padding: .9rem .9rem 1rem;
}

.track-block h3 {
  margin: .2rem 0 .6rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--jc-pink);
}

.track-block audio {
  width: 100%;
  margin-bottom: .5rem;
}

/* --- Rating group --- */
.rating-group { width: 100%; }

.rating-options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 0.42rem;
  margin-bottom: 2px;
}

.rating-options label {
  flex: 1 1 0;
  text-align: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: none;
  background: none;
  line-height: 1;
}

.rating-options label span {
  display: block;
  min-width: 40px;
  background: #242424;
  padding: .55rem 0;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  border: 1px solid #333;
  color: #ddd;
  user-select: none;
  transition: .15s background, .15s color, .15s border, .15s box-shadow;
}

/* Intégration des couleurs pour les boutons de vote */
.rating-options input { display: none; }

/* Quand coché (cliqué/sélectionné) => rose vif */
.rating-options input:checked + span {
  background: var(--jc-pink);
  color: #fff;
  font-weight: 600;
  border-color: var(--jc-pink);
  box-shadow: 0 0 0 2px rgba(233,75,102,0.26);
}

/* Hover => rouge principal */
.rating-options label:hover span,
.rating-options label:focus-visible span {
  background: var(--jc-red);
  color: #fff;
  border-color: var(--jc-red);
}

/* Focus clavier (accessibilité) */
.rating-options input:focus-visible + span,
.rating-options label:focus-within span {
  outline: 2px solid var(--jc-red);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(218,79,74,0.35);
}

/* --- Labels explicatifs sous 1 et 5 --- */
.rating-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
  color: var(--as-muted);
  margin-top: 3px;
  gap: 8px;
}

.rating-labels .label-1 { text-align: left;  min-width: 85px; }
.rating-labels .label-5 { text-align: right; min-width: 85px; }

/* Responsive pour mobile */
@media (max-width: 600px) {
  .rating-labels { font-size: 10px; gap: 2px; }
  .rating-labels .label-1,
  .rating-labels .label-5 { min-width: 55px; }
  .rating-options label span {
    font-size: .7rem;
    min-width: 27px;
    padding: .35rem 0;
  }
}

/* --- Footer (email / consentement) --- */
.album-survey-form .survey-footer {
  margin-top: 1.4rem;
  background: var(--as-panel);
  border: 1px solid var(--as-border);
  border-radius: 10px;
  padding: 1rem 1rem 1.2rem;
}

.album-survey-form input[type=email] {
  width: 100%;
  background: #ffffff;
  border: 1px solid #888;
  border-radius: 8px;
  color: #111;
  padding: .75rem .95rem;
  font-size: .95rem;
  margin-bottom: .7rem;
  transition: .15s border, .15s box-shadow;
}

.album-survey-form input[type=email]:focus {
  outline: none;
  border-color: var(--as-accent);
  box-shadow: 0 0 0 3px rgba(246,194,51,0.25);
}

.album-survey-form input[type=email]::placeholder { color: #888; opacity: 1; }

.album-survey-form .consent {
  font-size: .65rem;
  display: block;
  color: var(--as-muted);
  margin-bottom: .8rem;
  line-height: 1.4;
}

.album-survey-form button.survey-submit:enabled {
    background: #E94B66;
}

.album-survey-form button.survey-submit {
  width: 100%;
  background: var(--jc-pink);
  border: none;
  border-radius: 9px;
  color: #fff;
  font-weight: 600;
  padding: .9rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: .15s background, .15s box-shadow;
}

.album-survey-form button.survey-submit:hover:not(:disabled) {
  box-shadow: 0 4px 14px -4px rgba(233,75,102,0.45);
}

.album-survey-form button.survey-submit:disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

.survey-status {
  text-align: center;
  font-size: .8rem;
  margin-top: .7rem;
  min-height: 1rem;
  color: var(--as-muted);
}



/* --- Progression --- */
.survey-progress {
  margin-bottom: .9rem;
}
.survey-progress__bar {
  width: 100%;
  height: 10px;
  background: #2a2a2a;
  border: 1px solid #333;
  border-radius: 999px;
  overflow: hidden;
}
.survey-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--jc-pink);
  transition: width .2s ease;
}
.survey-progress__text {
  margin-top: 6px;
  font-size: 12px;
  color: var(--as-muted);
  text-align: center;
}

/* Accent rouge pour le texte "2 nouvelles maquettes" */
.album-survey-wrapper .accent-red { color: var(--jc-pink) !important; }