/* =============================================================
   OMES Avocats — Parcours de diagnostic
   ============================================================= */

.diag-page { min-height: 100dvh; display: flex; flex-direction: column; }
.diag-main { flex: 1; padding: var(--space-6) var(--space-5) var(--space-8); }
.diag-shell { max-width: 720px; margin: 0 auto; }

/* ---------- Barre de progression -------------------------- */
.diag-progress-wrap { margin-bottom: var(--space-6); }
.diag-progress-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey);
  margin-bottom: 10px; gap: 12px;
}
.diag-progress {
  height: 6px; border-radius: 3px; background: var(--hairline-2); overflow: hidden;
}
.diag-progress span {
  display: block; height: 100%; width: 0; background: var(--brand);
  border-radius: 3px; transition: width 0.35s var(--ease);
}

/* ---------- Question -------------------------------------- */
.diag-step { animation: diag-in 0.32s var(--ease); }
@keyframes diag-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .diag-step { animation: none; } }

.diag-q {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 3.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em;
  margin: 0 0 12px; color: var(--ink);
}
.diag-help { color: var(--grey); font-size: 15px; margin: 0 0 var(--space-5); }

/* Lien vers une source officielle, sous la phrase d'aide. */
.diag-lien { margin: -8px 0 var(--space-5); font-size: 14.5px; }
.diag-lien a {
  color: var(--brand-deep); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(180, 87, 60, 0.35);
}
.diag-lien a:hover { border-bottom-color: var(--brand-deep); }

/* Cas énumérés avant la question : à lire, pas à cliquer. Le retrait
   et la puce les séparent nettement des réponses possibles. */
.diag-liste {
  margin: 0 0 var(--space-5); padding: 0; list-style: none;
  display: grid; gap: 10px;
}
.diag-liste li {
  position: relative; padding-left: 20px;
  color: var(--ink); font-size: 15px; line-height: 1.6;
}
.diag-liste li::before {
  content: ''; position: absolute; left: 2px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}

.diag-options { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.diag-option {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: var(--white); border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md); padding: 18px 20px; cursor: pointer;
  font-family: var(--font-body); font-size: 15.5px; color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.diag-option:hover { border-color: var(--brand); background: var(--brand-wash-2); }
.diag-option:active { transform: translateY(1px); }
.diag-option .key {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: var(--cream); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--grey);
  margin-top: 1px;
}
.diag-option:hover .key { background: var(--brand); border-color: var(--brand); color: var(--white); }
.diag-option .opt-label { font-weight: 500; display: block; }
.diag-option .opt-hint { display: block; font-size: 13px; color: var(--grey); margin-top: 4px; line-height: 1.5; }

.diag-nav { display: flex; align-items: center; gap: 16px; margin-top: var(--space-6); flex-wrap: wrap; }
.diag-back {
  background: none; border: none; cursor: pointer; padding: 8px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--grey);
}
.diag-back:hover { color: var(--ink); }
.diag-back[hidden] { display: none; }
.diag-kbd-hint { font-size: 12.5px; color: var(--grey); margin-left: auto; }
@media (max-width: 640px) { .diag-kbd-hint { display: none; } }

/* ---------- Écran de résultat ----------------------------- */
.result-head {
  background: var(--white); border: 1px solid var(--hairline); border-top: 4px solid var(--brand);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-md); margin-bottom: var(--space-5);
}
.result-head.is-urgent { border-top-color: var(--terracotta); background: #FDF6F2; }

/* Démarche facultative, posée sous la procédure. Même facture que la
   tête de fiche, mais sans relief et sans ombre : c'est un complément,
   pas la réponse. Le trait est encre et non corail, pour que la
   procédure garde la première place dans l'œil. */
.result-demarche {
  background: var(--white); border: 1px solid var(--hairline);
  border-top: 4px solid var(--ink);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-5);
}
.result-demarche-titre {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.8vw, 24px); line-height: 1.25; letter-spacing: -0.01em;
  margin: 0 0 12px; color: var(--ink);
}
.result-demarche p {
  font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 12px 0 0;
}
.result-demarche p:first-of-type { margin-top: 14px; }

.result-kicker {
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 12px;
}
.result-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 3.4vw, 30px); line-height: 1.22; letter-spacing: -0.01em;
  margin: 0 0 12px; color: var(--ink);
}
/* Plusieurs pastilles possibles : elles se suivent sur la même ligne
   et passent à la suivante si la place manque. La marge basse n'est
   portée que par la dernière, pour ne pas creuser entre elles. */
.result-legal {
  display: inline-block; font-family: var(--font-display); font-size: 12px; font-weight: 600;
  background: var(--brand-wash); color: var(--brand-deep);
  padding: 5px 12px; border-radius: var(--radius-pill);
  margin: 0 8px 6px 0;
}
.result-legal:last-of-type { margin-bottom: 16px; }
/* Pastille cliquable : même forme, mais elle se signale au survol. */
a.result-legal.is-lien { text-decoration: none; transition: background 0.15s ease; }
a.result-legal.is-lien:hover { background: var(--brand); color: var(--white); }

/* Référence cliquable dans l'encadré de loi. */
.result-rappel cite a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, 0.35);
}
.result-rappel cite a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.result-summary { font-size: 15.5px; color: var(--ink); margin: 0; line-height: 1.7; }

.result-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.result-chip {
  font-size: 12.5px; color: var(--grey);
  background: var(--cream); border: 1px solid var(--hairline);
  padding: 7px 13px; border-radius: var(--radius-pill);
}
.result-chip strong { color: var(--ink); font-weight: 600; }

/* blocs détaillés */
.result-block {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: 14px;
}
.result-block h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  margin: 0 0 14px; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.result-block h3 .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0;
}
.result-block.warn h3 .dot { background: var(--terracotta); }
.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.result-list li {
  display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: var(--ink);
}
.result-list li::before {
  content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-top: 9px;
}
.result-block.warn .result-list li::before { background: var(--terracotta); }

.result-alt { font-size: 14px; color: var(--grey); line-height: 1.65; margin: 0; }
.result-alt strong { color: var(--ink); font-weight: 600; }

/* Ce que la procédure produit d'elle-même, avant le juge. Une bonne
   nouvelle mérite une couleur qui la distingue du texte de loi. */
.result-encart {
  background: var(--success-wash);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  padding: 22px 24px; margin-bottom: 14px;
}
.result-encart h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 1.8vw, 16.5px); letter-spacing: -0.005em;
  margin: 0 0 12px; color: var(--success);
}
.result-encart p {
  font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0 0 11px;
}
.result-encart p:last-child { margin-bottom: 0; }

/* rappel d'un texte de loi, avec sa mise en pratique */
.result-rappel {
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: 14px;
}
.result-rappel h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2.6vw, 22px); letter-spacing: -0.01em;
  margin: 0 0 18px; color: var(--brand);
}
.result-rappel blockquote {
  margin: 0 0 18px; padding-left: 16px;
  border-left: 2px solid var(--brand);
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(16px, 2vw, 18px); line-height: 1.65; color: var(--cream);
}
.result-rappel cite {
  display: block; margin: 0 0 10px; font-style: normal;
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 241, 234, 0.72);
}
.result-rappel p {
  font-size: 14.5px; line-height: 1.7; color: rgba(244, 241, 234, 0.85); margin: 0 0 12px;
}
.result-rappel p:last-child { margin-bottom: 0; }
/* Les alinéas d'un texte cité gardent la voix de la citation. */
.result-rappel blockquote p {
  font: inherit; color: inherit; margin: 0 0 0.7em;
}
.result-rappel blockquote p:last-child { margin-bottom: 0; }

/* récapitulatif des réponses */
.recap { background: var(--cream); border: 1px dashed var(--hairline-2); }
.recap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.recap-list li { font-size: 13.5px; line-height: 1.5; }
.recap-q { display: block; color: var(--grey); margin-bottom: 2px; }
.recap-a { display: block; color: var(--ink); font-weight: 600; }

/* avertissement */
.disclaimer {
  font-size: 12.5px; color: var(--grey); line-height: 1.65;
  border-left: 3px solid var(--hairline-2); padding: 4px 0 4px 14px; margin: var(--space-5) 0;
}

/* ---------- Actions de fin -------------------------------- */
.result-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-6);
  padding-top: var(--space-5); border-top: 1px solid var(--hairline);
}

/* ---------- Impression ------------------------------------ */
@media print {
  header.nav, footer, .lead-form, .result-actions, .diag-nav, .install-bar { display: none !important; }
  body { background: var(--white); }
  .result-head, .result-block { box-shadow: none; break-inside: avoid; }
}