/* =================================================================
   Wejair - Onboarding / Agent Wejair
   S'appuie sur les variables de styles.css. Fond blanc.
   ================================================================= */

.onb-section { padding-top: calc(var(--header-h) + clamp(28px, 5vw, 56px)); }
.onb-hero { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 44px); }
.onb-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 14px; }
.onb-hero p { color: var(--c-muted); font-size: 1.06rem; }

/* ---------- Disposition ---------- */
.onb-shell { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }

/* ---------- Carte chat ---------- */
.onb-chat { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 540px; }
.onb-chat:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--c-border); }
.onb-chat:hover::before { opacity: 0; }

/* Progression */
.onb-progress { padding: 16px 22px 12px; border-bottom: 1px solid var(--c-border); background: linear-gradient(120deg, rgba(109,93,251,.16), rgba(43,227,196,.08)); }
.onb-progress__bar { height: 7px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.onb-progress__bar span { display: block; height: 100%; border-radius: 999px; background: var(--grad-main); transition: width .5s cubic-bezier(.16,.84,.44,1); }
.onb-progress__label { margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--c-primary); letter-spacing: .02em; }

/* Fil de messages */
.onb-messages { flex: 1; padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 60vh; }
.onb-msg { display: flex; gap: 12px; align-items: flex-start; max-width: 92%; animation: onbIn .35s ease both; }
@keyframes onbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.onb-msg__avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad-main); box-shadow: 0 6px 16px -6px rgba(109,93,251,.6); }
.onb-msg__avatar svg { width: 18px; height: 18px; }
.onb-msg__bubble { padding: 13px 16px; border-radius: 16px; font-size: .96rem; line-height: 1.55; }
.onb-msg__bubble p { margin: 0 0 8px; } .onb-msg__bubble p:last-child { margin-bottom: 0; }
.onb-msg__bubble strong, .onb-msg__bubble b { color: var(--c-text); }

.onb-msg--bot .onb-msg__bubble { background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border); border-top-left-radius: 5px; }
.onb-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.onb-msg--user .onb-msg__avatar { background: var(--c-surface-2); color: var(--c-primary); box-shadow: none; border: 1px solid var(--c-border); }
.onb-msg--user .onb-msg__bubble { background: var(--grad-main); color: #fff; border-top-right-radius: 5px; }
.onb-msg--user .onb-msg__bubble strong, .onb-msg--user .onb-msg__bubble b { color: #fff; }

/* Indicateur de saisie */
.onb-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.onb-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-faint); animation: onbBlink 1.2s infinite ease-in-out; }
.onb-typing i:nth-child(2) { animation-delay: .2s; } .onb-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes onbBlink { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Réponses rapides (chips) */
.onb-quick { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 22px; }
.onb-quick:not(:empty) { padding-bottom: 14px; }
.onb-chip {
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--c-border-strong);
  background: var(--c-surface-2); color: var(--c-text); font-weight: 500; font-size: .9rem; cursor: pointer;
  transition: all .18s ease; animation: onbIn .3s ease both;
}
.onb-chip:hover { border-color: var(--c-primary); background: rgba(109,93,251,.07); transform: translateY(-2px); }

/* Zone de saisie */
.onb-form { display: flex; gap: 10px; align-items: flex-end; padding: 16px 18px; border-top: 1px solid var(--c-border); background: var(--c-bg-2); }
.onb-form textarea {
  flex: 1; resize: none; min-height: 46px; max-height: 140px; padding: 12px 16px;
  border-radius: var(--r-md); border: 1px solid var(--c-border-strong); font-size: .96rem; line-height: 1.4;
}
.onb-send { width: 46px; height: 46px; flex: none; border-radius: var(--r-md); background: var(--grad-main); color: #fff; display: grid; place-items: center; transition: transform .2s, box-shadow .2s; box-shadow: 0 10px 24px -10px rgba(109,93,251,.6); }
.onb-send:hover { transform: translateY(-2px); }
.onb-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.onb-send svg { width: 19px; height: 19px; }

/* ---------- Colonne latérale ---------- */
.onb-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.onb-card-side { padding: 20px 22px; }
.onb-card-side h3 { font-size: 1.05rem; margin-bottom: 14px; }
.onb-profile { display: grid; gap: 10px; }
.onb-profile li { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding-bottom: 9px; border-bottom: 1px dashed var(--c-border); }
.onb-profile li:last-child { border-bottom: none; padding-bottom: 0; }
.onb-profile li span { color: var(--c-faint); flex: none; }
.onb-profile li b { color: var(--c-text); text-align: right; font-weight: 600; }
.onb-profile li.is-set b { color: var(--c-primary-600); }

.onb-trust { display: grid; gap: 12px; }
.onb-trust__item { display: flex; gap: 11px; align-items: center; font-size: .86rem; color: var(--c-muted); }
.onb-trust__item svg { width: 19px; height: 19px; color: var(--c-cyan); flex: none; }

.onb-restart { justify-self: start; font-size: .85rem; color: var(--c-faint); padding: 6px 4px; }
.onb-restart:hover { color: var(--c-primary); }

/* ---------- Panneau Audit ---------- */
.onb-audit { margin-top: 30px; animation: onbIn .5s ease both; }
.onb-audit__head { text-align: center; max-width: 680px; margin: 0 auto 28px; }
.onb-audit__head .eyebrow { margin-inline: auto; }
.onb-audit__head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 10px; }
.onb-audit__grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 22px; align-items: start; }
.onb-audit__col { display: grid; gap: 18px; }

.audit-block { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.audit-block h3 { font-size: 1.1rem; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.audit-block h3 svg { width: 20px; height: 20px; color: var(--c-cyan); }
.audit-block p { color: var(--c-muted); font-size: .96rem; }
.audit-list { display: grid; gap: 11px; }
.audit-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--c-muted); font-size: .95rem; }
.audit-list li svg { width: 18px; height: 18px; color: var(--c-primary); flex: none; margin-top: 3px; }
.audit-list--gain li svg { color: var(--c-cyan); }

/* Jauge de score */
.audit-score { text-align: center; }
.audit-gauge { --val: 0; width: 150px; height: 150px; margin: 6px auto 12px; border-radius: 50%;
  background: conic-gradient(var(--c-primary) calc(var(--val) * 1%), var(--c-surface-2) 0);
  display: grid; place-items: center; position: relative; }
.audit-gauge::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--c-bg-2); }
.audit-gauge__val { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.audit-gauge__val small { font-size: .9rem; -webkit-text-fill-color: var(--c-faint); }
.audit-score__label { font-weight: 600; color: var(--c-text); }
.audit-score__label span { color: var(--c-primary); }

/* Démo + CTA */
.audit-demo { background: var(--grad-main); color: #fff; border: none; }
.audit-demo h3 { color: #fff; } .audit-demo h3 svg { color: #fff; }
.audit-demo p { color: rgba(255,255,255,.94); }
.audit-cta { margin-top: 6px; }
.audit-cta .field { margin-bottom: 12px; }
.audit-cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.audit-note { font-size: .82rem; color: var(--c-faint); margin-top: 10px; }
.audit-note.is-success { color: #0E9F6E; font-weight: 600; }

.onb-mode-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--c-faint); margin-top: 10px; }
.onb-mode-badge i { width: 7px; height: 7px; border-radius: 50%; background: #F5A623; display: block; }
.onb-mode-badge.is-ia i { background: #28C840; }

/* ---------- Démo interactive (données d'exemple) ---------- */
.audit-livedemo { position: relative; overflow: hidden; }
.audit-livedemo::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-main); }
.livedemo__intro { color: var(--c-muted); font-size: .92rem; margin-bottom: 14px; }
.livedemo__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.livedemo__chip {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--c-border-strong);
  background: var(--c-surface-2); color: var(--c-text); font-size: .84rem; font-weight: 500;
  cursor: pointer; transition: all .18s ease;
}
.livedemo__chip:hover { border-color: var(--c-primary); background: rgba(109,93,251,.07); transform: translateY(-1px); }
.livedemo__form { display: flex; gap: 8px; align-items: stretch; }
.livedemo__form input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--c-border-strong); font-size: .92rem; background: var(--c-bg-2); color: var(--c-text);
}
.livedemo__form input:focus { outline: none; border-color: var(--c-primary); }
.livedemo__form .onb-send { width: 44px; }
.livedemo__answer { margin-top: 14px; display: grid; gap: 8px; animation: onbIn .3s ease both; }
.livedemo__q { font-size: .85rem; font-weight: 600; color: var(--c-primary-600); }
.livedemo__q::before { content: '\276F  '; opacity: .55; }
.livedemo__a { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 13px 15px; color: var(--c-text); font-size: .94rem; line-height: 1.55; }
.livedemo__a p { margin: 0 0 8px; } .livedemo__a p:last-child { margin-bottom: 0; }
.livedemo__a--wait { display: flex; align-items: center; min-height: 24px; }
.livedemo__src { margin-top: 9px; font-size: .76rem; color: var(--c-faint); border-top: 1px dashed var(--c-border); padding-top: 8px; }
.livedemo__note { margin-top: 12px; font-size: .74rem; color: var(--c-faint); }

/* ---------- Offre POC (à côté du formulaire) ---------- */
.audit-poc {
  background: rgba(43,227,196,.08); border: 1px solid rgba(43,227,196,.35);
  border-radius: var(--r-md); padding: 11px 14px; font-size: .86rem; color: var(--c-muted);
  margin-bottom: 14px; line-height: 1.5;
}
.audit-poc b { color: var(--c-text); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .onb-shell { grid-template-columns: 1fr; }
  .onb-aside { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
  .onb-restart { grid-column: 1 / -1; }
  .onb-audit__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .onb-aside { grid-template-columns: 1fr; }
  .audit-cta__row { grid-template-columns: 1fr; }
  .onb-messages { max-height: 56vh; }
}

/* =================================================================
   DIAGNOSTIC EXPRESS (refonte 10/2026, docs/PRD-refonte-wejair.md §5)
   ================================================================= */
.diag-card { padding: clamp(22px, 3.4vw, 34px); min-height: 420px; }
.diag-card:hover { transform: none; background: var(--c-surface); border-color: var(--c-border); box-shadow: none; }
.diag-card:hover::before { opacity: 0; }
.diag-card h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: 18px; }
.diag-card h3 { font-size: 1.08rem; margin: 22px 0 12px; }
.diag-card [data-focus]:focus { outline: none; }
.diag-head { margin-bottom: 18px; }
.diag-head .eyebrow { margin-bottom: 12px; }

/* Progression */
.diag-progress { display: flex; align-items: center; gap: 14px; font-size: .82rem; font-weight: 600; color: var(--c-primary); }
.diag-progress__bar { flex: 1; height: 7px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.diag-progress__bar span { display: block; height: 100%; border-radius: 999px; background: var(--grad-main); transition: width .4s cubic-bezier(.16,.84,.44,1); }

/* Question et options */
.diag-q { line-height: 1.3; }
.diag-opts { display: grid; gap: 10px; }
.diag-portes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diag-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 15px 18px; border-radius: var(--r-md); border: 1px solid var(--c-border-strong);
  background: var(--c-surface-2); color: var(--c-text); font: inherit; font-size: .98rem; line-height: 1.4;
  text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.diag-opt svg { width: 18px; height: 18px; flex: none; color: var(--c-cyan); }
.diag-opt:hover { border-color: var(--c-primary); background: rgba(109,93,251,.10); transform: translateX(3px); }
.diag-opt:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.diag-opt.is-choisie { border-color: var(--c-cyan); background: rgba(43,227,196,.12); }
.diag-portes .diag-opt { min-height: 74px; font-weight: 600; }
.diag-nav { margin-top: 18px; min-height: 30px; }
.diag-retour { font-size: .88rem; color: var(--c-faint); padding: 6px 2px; background: none; border: 0; cursor: pointer; }
.diag-retour:hover { color: var(--c-primary); }
.diag-attente { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 340px; color: var(--c-muted); }

/* Résultat */
.diag-resultat { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center; }
.diag-resultat__score { text-align: center; }
.diag-resultat h3 { margin-top: 0; }
.diag-dims { display: grid; gap: 12px; }
.diag-dims li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 34px; align-items: center; gap: 12px; font-size: .92rem; color: var(--c-muted); }
.diag-dims li small { color: var(--c-faint); }
.diag-dims li b { color: var(--c-text); text-align: right; font-family: var(--font-display); }
.diag-dims__barre { height: 8px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.diag-dims__barre i { display: block; height: 100%; border-radius: 999px; background: var(--grad-main); }
.diag-card .repere { margin: 22px 0 0; text-align: left; font-size: .92rem; }
.diag-actions { display: grid; gap: 12px; counter-reset: diag; }
.diag-actions li {
  counter-increment: diag; position: relative; padding: 14px 16px 14px 56px;
  border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface-2);
  display: grid; gap: 4px; font-size: .94rem; color: var(--c-muted); line-height: 1.5;
}
.diag-actions li::before {
  content: counter(diag); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-main); color: #fff; font-weight: 700; font-size: .85rem;
}
.diag-actions li b { color: var(--c-text); }
.diag-suite { margin-top: 26px; padding: 22px; border-radius: var(--r-md); border: 1px solid rgba(139,123,255,.35); background: linear-gradient(120deg, rgba(109,93,251,.14), rgba(43,227,196,.06)); }
.diag-suite h3 { margin-top: 0; }
.diag-suite p { color: var(--c-muted); font-size: .95rem; margin-bottom: 16px; }
.diag-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.diag-lien { margin-top: 14px; font-size: .92rem; }
.diag-lien a { color: var(--c-cyan); text-decoration: underline; text-underline-offset: 3px; }
.diag-card .audit-note a { color: var(--c-muted); text-decoration: underline; }
.diag-card .diag-retour { margin-top: 12px; display: inline-block; }
.diag-resume { display: grid; gap: 10px; margin-bottom: 18px; }
.diag-resume li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px dashed var(--c-border); font-size: .92rem; }
.diag-resume li span { color: var(--c-faint); }
.diag-resume li b { color: var(--c-text); text-align: right; font-weight: 600; }

/* Colonne latérale : aperçu et pondération */
.diag-apercu__score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.diag-apercu__score b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.diag-apercu__score span { color: var(--c-faint); font-size: .85rem; }
.diag-apercu ul, .diag-poids { display: grid; gap: 8px; margin-bottom: 12px; }
.diag-apercu li, .diag-poids li { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--c-muted); }
.diag-apercu li b, .diag-poids li b { color: var(--c-text); }
.diag-apercu__note { font-size: .76rem; color: var(--c-faint); margin-top: 6px; }

/* Bloc « Recevoir le rapport complet » (audit approfondi) */
.audit-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: .82rem; color: var(--c-faint); }
.audit-or::before, .audit-or::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }
.audit-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--c-muted); margin: 4px 0 14px; line-height: 1.45; }
.audit-consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; padding: 0; accent-color: var(--c-primary-600); }
.audit-consent a { color: var(--c-muted); text-decoration: underline; }
#diagChat { margin-top: 24px; }

@media (max-width: 720px) {
  .diag-portes { grid-template-columns: 1fr; }
  .diag-portes .diag-opt { min-height: 60px; }
  .diag-resultat { grid-template-columns: 1fr; gap: 18px; }
  .diag-dims li { grid-template-columns: minmax(0, 1fr) 70px 30px; gap: 8px; }
  .diag-btns .btn { width: 100%; white-space: normal; }
  .diag-card { min-height: 0; }
}

/* ---------- Rapport à lien privé (/diagnostic/rapport/…) ---------- */
.rapport .onb-hero .rapport-outils { margin-top: 18px; }
.rapport-bloc { max-width: 980px; margin: 0 auto 24px; }
.rapport-bloc:hover { transform: none; background: var(--c-surface); border-color: var(--c-border); box-shadow: none; }
.rapport-bloc:hover::before { opacity: 0; }
.rapport-bloc h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 14px; }
.rapport-bloc p { color: var(--c-muted); margin-bottom: 16px; }
.rapport-bloc p a { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.rapport-reponses { margin-top: 22px; border-top: 1px solid var(--c-border); padding-top: 16px; }
.rapport-reponses summary { cursor: pointer; font-weight: 600; color: var(--c-primary); }
.rapport-reponses .diag-resume { margin: 14px 0 0; }
.rapport-audit { max-width: 980px; margin: 0 auto 24px; }
.rapport-suite { border-color: rgba(139,123,255,.35); background: linear-gradient(120deg, rgba(109,93,251,.12), rgba(43,227,196,.05)); }
.rapport-suite .eyebrow { margin-bottom: 10px; }

/* Impression / PDF : fond clair, sans navigation */
@media print {
  :root { --c-bg: #fff; --c-bg-2: #fff; --c-surface: #fff; --c-surface-2: #f1f1f6; --c-border: #d9d9e3; --c-border-strong: #c4c4d4;
          --c-text: #111; --c-muted: #333; --c-faint: #555; }
  body { background: #fff; color: #111; }
  .header, .footer, .v2-aurora, .v2-grid-bg, .v2-grain, .skip-link, .rapport-outils, .rapport-suite .diag-btns, .hn-cc { display: none !important; }
  .onb-section { padding-top: 0; }
  .text-grad, .audit-gauge__val { -webkit-text-fill-color: #5A48F0; color: #5A48F0; background: none; }
  .card, .audit-block, .diag-actions li { box-shadow: none; break-inside: avoid; }
  .audit-demo { background: #f1f1f6; color: #111; } .audit-demo h3, .audit-demo p { color: #111; }
  .rapport-reponses:not([open]) > *:not(summary) { display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Diagnostic sur mobile : en-tête resserré, pour que les réponses tiennent dans le premier écran */
@media (max-width: 560px) {
  .diag-section { padding-top: calc(var(--header-h) + 18px); }
  .diag-hero { margin-bottom: 18px; }
  .diag-hero h1 { font-size: 1.7rem; margin-bottom: 0; }
  .diag-hero p { display: none; }
  .diag-card { padding: 20px 18px; }
  .diag-opt { padding: 13px 15px; }
}