/* Qualification questionnaire. Colours and radii come from variables: override them on any ancestor
   (or on .br-qualif itself) to restyle. Defaults suit a dark background. */
:root {
  --br-qualif-texte: #d6dae3;
  --br-qualif-titre: #ffffff;
  --br-qualif-discret: #9aa3b2;
  --br-qualif-accent: #ff7634;
  --br-qualif-accent-clair: #ffa97a;
  --br-qualif-sur-accent: #05060a;
  --br-qualif-fond: rgba(255, 255, 255, .02);
  --br-qualif-fond-option: rgba(255, 255, 255, .04);
  --br-qualif-bord: rgba(255, 255, 255, .1);
  --br-qualif-bord-fort: rgba(255, 255, 255, .22);
  --br-qualif-piste: rgba(255, 255, 255, .08);
  --br-qualif-rayon: 16px;
  --br-qualif-rayon-option: 12px;
}

.br-qualif { max-width: 720px; margin: 0 auto; padding: 26px; color: var(--br-qualif-texte);
  background: var(--br-qualif-fond); border: 1px solid var(--br-qualif-bord); border-radius: var(--br-qualif-rayon); }
.br-qualif__etape { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.br-qualif__etape[hidden], .br-qualif__resultat[hidden], .br-qualif__progres[hidden], .br-qualif__nav[hidden],
.br-qualif__bouton[hidden] { display: none; }
.br-qualif__question { padding: 0; margin-bottom: 14px; font-size: 1.2rem; font-weight: 700; line-height: 1.35;
  color: var(--br-qualif-titre); }
.br-qualif__options { display: grid; gap: 10px; margin-bottom: 14px; }
.br-qualif__option { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer;
  background: var(--br-qualif-fond-option); border: 1px solid var(--br-qualif-bord); border-radius: var(--br-qualif-rayon-option);
  transition: border-color .2s, background-color .2s; }
.br-qualif__option:hover { border-color: var(--br-qualif-bord-fort); }
.br-qualif__option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--br-qualif-accent); }
.br-qualif__option:has(input:checked) { border-color: var(--br-qualif-accent); }
.br-qualif__option:has(input:focus-visible) { outline: 2px solid var(--br-qualif-accent-clair); outline-offset: 2px; }

.br-qualif__bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  font: inherit; font-weight: 700; cursor: pointer; color: var(--br-qualif-titre); background: transparent;
  border: 1px solid var(--br-qualif-bord-fort); border-radius: 30px; transition: border-color .2s, opacity .2s; }
.br-qualif__bouton:hover { border-color: var(--br-qualif-accent-clair); }
.br-qualif__bouton:focus-visible, .br-qualif__essai:focus-visible, .br-qualif__resultat:focus-visible,
.br-qualif__etape:focus-visible { outline: 2px solid var(--br-qualif-accent-clair); outline-offset: 2px; }
.br-qualif__bouton--principal { color: var(--br-qualif-sur-accent); background: var(--br-qualif-accent);
  border-color: var(--br-qualif-accent); }
.br-qualif__bouton--principal:hover { border-color: var(--br-qualif-accent-clair); background: var(--br-qualif-accent-clair); }
.br-qualif__bouton:disabled { opacity: .45; cursor: not-allowed; }

/* JavaScript mode: progress bar and Précédent / Suivant */
.br-qualif__progres { margin-bottom: 22px; }
.br-qualif__barre { height: 8px; border-radius: 8px; overflow: hidden; background: var(--br-qualif-piste); }
.br-qualif__remplie { display: block; width: 0; height: 100%; border-radius: 8px; background: var(--br-qualif-accent);
  transition: width .35s ease; }
.br-qualif__compteur { margin: 8px 0 0; font-size: .88rem; color: var(--br-qualif-discret); }
.br-qualif__message { margin: 6px 0 0; font-size: .92rem; font-weight: 700; color: var(--br-qualif-accent-clair); }
.br-qualif__message:empty { display: none; }
.br-qualif__nav { display: flex; justify-content: space-between; gap: 12px; }
.br-qualif__nav .br-qualif__bouton--principal { margin-left: auto; }
.br-qualif--js .br-qualif__etape { margin-bottom: 18px; }

/* Result */
.br-qualif__resultat { padding: 24px; border: 1px solid var(--br-qualif-accent); border-radius: var(--br-qualif-rayon-option); }
.br-qualif__titre { margin: 0 0 10px; font-size: 1.4rem; line-height: 1.3; color: var(--br-qualif-titre); }
.br-qualif__texte { margin: 0 0 12px; line-height: 1.6; }
.br-qualif__prix { display: inline-block; margin: 0 0 18px; padding: 5px 14px; font-size: .9rem; font-weight: 700;
  color: var(--br-qualif-accent-clair); border: 1px solid var(--br-qualif-accent); border-radius: 30px; }
.br-qualif__prix del { margin-right: 6px; font-size: .8rem; font-weight: 400; color: var(--br-qualif-discret); }
.br-qualif__prix ins { text-decoration: none; }
.br-qualif__note { margin: -8px 0 18px; font-size: .88rem; line-height: 1.5; color: var(--br-qualif-discret); }
.br-qualif__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.br-qualif__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.br-qualif__essai { color: var(--br-qualif-accent-clair); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 575px) {
  .br-qualif { padding: 18px; }
  .br-qualif__actions .br-qualif__bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .br-qualif__option, .br-qualif__bouton, .br-qualif__remplie { transition: none; }
}