/* =========================================================
   QUESTIONNAIRE GoMSP
   Fond dégradé IT / IA rose-violet + sélection rose clair
   ========================================================= */

/* Fond général de la page */
html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 82%, rgba(246, 49, 93, 0.45), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(93, 12, 60, 0.55), transparent 32%),
    radial-gradient(circle at 72% 92%, rgba(180, 35, 255, 0.35), transparent 30%),
    radial-gradient(circle at 28% 22%, rgba(0, 105, 255, 0.24), transparent 30%),
    linear-gradient(135deg, #050713 0%, #090b20 46%, #16051f 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  position: relative;
}

/* Grille technologique discrète */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(246, 49, 93, 0.12), transparent 35%),
    linear-gradient(45deg, transparent 45%, rgba(0, 120, 255, 0.12), transparent 75%);

  background-size:
    44px 44px,
    44px 44px,
    100% 100%,
    100% 100%;

  opacity: 0.95;
}

/* Effet IT / data / IA */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(circle at 18% 28%, rgba(246, 49, 93, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 66%, rgba(150, 70, 255, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 22%, rgba(0, 135, 255, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 70%, rgba(246, 49, 93, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 38%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    linear-gradient(120deg, transparent 20%, rgba(246, 49, 93, 0.16), transparent 48%),
    linear-gradient(60deg, transparent 38%, rgba(0, 110, 255, 0.16), transparent 74%);

  background-size:
    230px 230px,
    310px 310px,
    270px 270px,
    340px 340px,
    280px 280px,
    100% 100%,
    100% 100%;

  opacity: 0.85;
}

/* Zone principale du questionnaire */
.questionnaire-container,
.form-container,
.container,
main {
  max-width: 980px;
  margin: 40px auto;
  padding: 32px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 35px rgba(93, 12, 60, 0.25),
    0 0 70px rgba(52, 95, 255, 0.16);
  backdrop-filter: blur(10px);
}

/* Bannière */
.questionnaire-banner,
.banner {
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  margin-bottom: 32px;
}

.questionnaire-banner img,
.banner img {
  width: 100%;
  display: block;
}

/* Questions */
.question-block,
.question {
  background: transparent !important;
  padding: 40px 0 25px !important;
  margin-bottom: 35px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Titres des questions */
.question-block h1,
.question-block h2,
.question-block h3,
.question-block h4,
.question h1,
.question h2,
.question h3,
.question h4,
.question-title,
label.question-title,
fieldset legend,
legend {
  color: #5D0C3C !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 22px !important;
}

/* Astérisque obligatoire */
.question-title .required,
.required,
span[style*="red"] {
  color: #5D0C3C !important;
  font-weight: 800 !important;
}

/* Texte d’aide */
.question-description,
.question-help,
.help-text,
small {
  color: #000000 !important;
  font-size: 17px !important;
  margin-bottom: 20px !important;
  display: block !important;
}

/* Conteneur des réponses */
.answers,
.choices,
.options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Réponses en encadrés blancs */
.answer-option,
.choice,
.option,
.response,
.answers label,
.checkbox label,
.radio label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 58px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a1a !important;

  padding: 14px 20px !important;
  margin: 10px 0 !important;

  border-radius: 4px !important;
  border: 1px solid #e5e5e5 !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;

  font-size: 18px !important;
  font-weight: 400 !important;

  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.answer-option:hover,
.choice:hover,
.option:hover,
.response:hover,
.answers label:hover,
.checkbox label:hover,
.radio label:hover {
  border-color: #5D0C3C !important;
  box-shadow: 0 3px 10px rgba(93, 12, 60, 0.25) !important;
}

/* =========================================================
   RÉPONSE SÉLECTIONNÉE
   Force le bleu par défaut en rose-violet clair transparent
   ========================================================= */

.answer-option.selected,
.choice.selected,
.option.selected,
.response.selected,
.answers label.selected,
.checkbox label.selected,
.radio label.selected,
input:checked + label,
label:has(input:checked),
[aria-checked="true"],
[aria-selected="true"],
.is-selected,
.is-active,
.selected,
.checked,
.active {
  background: rgba(177, 57, 130, 0.22) !important;
  background-color: rgba(177, 57, 130, 0.22) !important;
  color: #5D0C3C !important;
  border: 2px solid rgba(93, 12, 60, 0.75) !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(93, 12, 60, 0.24) !important;
}

/* Texte dans une réponse sélectionnée */
.answer-option.selected *,
.choice.selected *,
.option.selected *,
.response.selected *,
.answers label.selected *,
.checkbox label.selected *,
.radio label.selected *,
input:checked + label *,
label:has(input:checked) *,
[aria-checked="true"] *,
[aria-selected="true"] *,
.is-selected *,
.is-active *,
.selected *,
.checked *,
.active * {
  color: #5D0C3C !important;
}

/* Corrige aussi les styles inline/outil qui forcent du bleu */
[style*="background-color: rgb(84, 145, 201)"],
[style*="background-color:#5491c9"],
[style*="background-color: #5491c9"],
[style*="background: rgb(84, 145, 201)"],
[style*="background:#5491c9"],
[style*="background: #5491c9"] {
  background: rgba(177, 57, 130, 0.22) !important;
  background-color: rgba(177, 57, 130, 0.22) !important;
  color: #5D0C3C !important;
  border-color: rgba(93, 12, 60, 0.75) !important;
}

/* Cases à cocher / boutons radio */
input[type="checkbox"],
input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #5D0C3C !important;
  cursor: pointer !important;
}

/* Barre de progression */
.progress,
.progress-bar,
.progress-container,
.survey-progress,
.progression,
[class*="progress"] {
  border-radius: 999px !important;
}

.progress,
.progress-container,
.survey-progress,
.progression {
  background: rgba(93, 12, 60, 0.14) !important;
}

.progress-bar,
.progress-fill,
.progress-value,
.survey-progress-bar,
.survey-progress-fill,
[class*="progress-bar"],
[class*="progress-fill"] {
  background: #5D0C3C !important;
  background-color: #5D0C3C !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

.progress *,
.progress-bar *,
.progress-container *,
.survey-progress *,
[class*="progress"] * {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Boutons Suivant / Précédent / Terminer */
button,
.submit-button,
input[type="submit"],
input[type="button"],
.next-button,
.previous-button,
.prev-button,
.back-button,
.btn-next,
.btn-prev,
.btn-back,
.btn-submit,
.survey-next,
.survey-prev,
.survey-submit,
[class*="next"],
[class*="previous"],
[class*="prev"],
[class*="submit"] {
  background: #5D0C3C !important;
  background-color: #5D0C3C !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 0 18px rgba(93, 12, 60, 0.35) !important;
  transition: all 0.2s ease !important;
}

button *,
.submit-button *,
.next-button *,
.previous-button *,
.prev-button *,
.back-button *,
.btn-next *,
.btn-prev *,
.btn-back *,
.btn-submit *,
.survey-next *,
.survey-prev *,
.survey-submit *,
[class*="next"] *,
[class*="previous"] *,
[class*="prev"] *,
[class*="submit"] * {
  color: #ffffff !important;
}

button:hover,
.submit-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.next-button:hover,
.previous-button:hover,
.prev-button:hover,
.back-button:hover,
.btn-next:hover,
.btn-prev:hover,
.btn-back:hover,
.btn-submit:hover,
.survey-next:hover,
.survey-prev:hover,
.survey-submit:hover,
[class*="next"]:hover,
[class*="previous"]:hover,
[class*="prev"]:hover,
[class*="submit"]:hover {
  background: #75124f !important;
  background-color: #75124f !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(93, 12, 60, 0.5) !important;
}

/* Version mobile */
@media (max-width: 768px) {
  .questionnaire-container,
  .form-container,
  .container,
  main {
    margin: 20px 12px;
    padding: 22px;
    border-radius: 18px;
  }

  .question-block h1,
  .question-block h2,
  .question-block h3,
  .question-block h4,
  .question h1,
  .question h2,
  .question h3,
  .question h4,
  .question-title,
  label.question-title,
  fieldset legend,
  legend {
    font-size: 22px !important;
  }

  .answer-option,
  .choice,
  .option,
  .response,
  .answers label,
  .checkbox label,
  .radio label {
    font-size: 16px !important;
    padding: 13px 16px !important;
  }
}