/* ==========================================================
   ecomstrike — /business : le questionnaire d'orientation

   La page fonctionne sans JavaScript : les cinq questions et
   les cinq voies sont dans le HTML. Le script ne fait que
   masquer, compter et mettre en avant.
   ========================================================== */

/* ---------- Le questionnaire ----------
   Le questionnaire est posé sur un panneau, et non à même la page :
   sur le fond noir du site, les questions flottaient sans limite et
   l'ensemble ne se lisait pas comme un outil.

   Le panneau reste très discret — une nappe de lumière venue du haut,
   un remplissage presque nul, et c'est son liseré qui le tient. Les
   boutons de réponse gardent un remplissage légèrement supérieur au
   panneau : la hiérarchie se fait par degrés, pas par contraste. */
.onb {
  --onb-pad: 34px;

  position: relative;
  /* width: 100% n'est pas décoratif. « main.page » est une colonne
     flex ; une marge automatique sur l'axe transversal annule
     l'étirement, et le panneau se calait alors sur la longueur de son
     texte — 658 px en français, 703 px en anglais. Avec la largeur
     posée, les marges automatiques ne font plus que le centrer. */
  width: 100%;
  max-width: 720px;
  margin: 10px auto 0;
  padding: var(--onb-pad);
  border-radius: 26px;
  border: 1px solid var(--line);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008));
  box-shadow: var(--ombre-haute);
}

/* Le liseré dégradé du panneau, repris de style.css : cette feuille
   se charge après, la règle commune ne peut donc pas l'atteindre. */
.onb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--lux);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask-composite: exclude;
  pointer-events: none;
}

/* La barre de progression court d'un bord à l'autre, en haut du
   panneau, comme l'avancement d'un vrai formulaire. */
/* La barre reste dans la marge intérieure du panneau : elle fait partie
   de l'en-tête du formulaire. Un rail à 9 % plutôt que 6 % — le panneau
   étant lui-même éclairé, un rail plus pâle disparaissait, et à la
   première question la jauge est à zéro : il ne reste que lui. */
.onb-barre {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.onb-barre i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #fff);
  box-shadow: 0 0 12px -2px rgba(255, 255, 255, 0.45);
  transition: width 0.7s var(--ease-doux);
}

.onb-etape {
  margin-top: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-dark);
}

.onb-q { margin-top: 18px; }
.onb-q h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.15;
  text-wrap: balance;
}
.onb-q .onb-aide {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey-dark);
  text-wrap: pretty;
}

.onb-choix {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.onb-choix button {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.5s var(--ease-doux), transform 0.5s var(--ease-doux);
}
.onb-choix button:hover,
.onb-choix button:focus-visible {
  background: rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}
.onb-choix button b { font-weight: 500; flex: none; }
.onb-choix button span {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--grey-dark);
}

.onb-retour {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grey-dark);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.3s;
}
.onb-retour:hover { color: var(--white); }

/* ---------- Le résultat ---------- */
.onb-res { margin-top: 18px; }

.onb-res .onb-titre {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.15;
  text-wrap: balance;
}

.onb-res .onb-pourquoi {
  margin-top: 13px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
  text-wrap: pretty;
}

.onb-note {
  position: relative;
  margin-top: 22px;
  padding: 15px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey-dark);
}
.onb-note::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03));
}

.onb-res .onb-second {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey-dark);
}

.onb-refaire {
  margin-top: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grey-dark);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.onb-refaire:hover { color: var(--white); }

/* ---------- Les cinq voies ---------- */
.voies {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.voie {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 23px 22px 19px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--glass);
  transition: background 0.55s var(--ease-doux), opacity 0.55s var(--ease-doux);
}

/* La voie retenue : mise en avant sans changer la structure.
   Le liseré s'allume par le calque commun, et une nappe part du haut
   de la carte — plus juste qu'un aplat gris clair. */
.voie.retenue {
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(255, 255, 255, 0.075), transparent 70%),
    var(--glass);
}
.voie.retenue::after { background: var(--lux-on); }
.voie.ecartee { opacity: 0.4; }

.voie h3 {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.028em;
}
.voie .voie-quoi {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey);
  text-wrap: pretty;
}

.voie dl {
  margin: 18px 0 0;
  display: grid;
  gap: 9px;
}
.voie dl > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: -0.005em;
}
.voie dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.voie dt { color: var(--grey-dark); }
.voie dd { margin: 0; color: var(--white); text-align: right; }

.voie .go { margin-top: 20px; }

.voie-rang {
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- La flèche des cartes ----------
   Reprise de accueil.css : cette page ne charge pas cette
   feuille, et sans ces règles le lien redevient un lien bleu
   souligné au milieu d'une carte sombre. */
.go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: -0.005em;
  color: var(--grey);
  text-decoration: none;
  transition: color 0.45s var(--ease-doux);
}
.go > span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: background 0.5s var(--ease-doux), border-color 0.5s var(--ease-doux), transform 0.5s var(--ease-doux);
}
.go > span::before {
  content: "";
  width: 4.5px;
  height: 4.5px;
  border-top: 1.2px solid currentColor;
  border-right: 1.2px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}
.voie:hover .go,
.go:hover,
.go:focus-visible { color: var(--white); }
.voie:hover .go > span,
.go:hover > span {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateX(2px);
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .onb { --onb-pad: 20px; border-radius: 20px; }
  .onb-etape { margin-top: 20px; }
  .onb-q h2, .onb-res .onb-titre { font-size: 22px; }
  .onb-choix button { flex-direction: column; gap: 5px; padding: 15px 17px; }
  .voies { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .onb { --onb-pad: 16px; }
}