/* Page Diagnostic — styles propres au gabarit scripts/generate-pages/templates/diagnostic.mjs.
   Chargée après main.css, uniquement sur /fr/diagnostic/. Les écrans du quiz
   rendus par assets/js/diagnostic-modal.js portent leurs styles en ligne (mêmes
   que la modale) ; ce fichier ne fait que les mettre en page dans la page :
   largeur du conteneur, largeur de lecture des écrans, écran d'intro statique.
   Mise en page : page « diagnostic » de maquette/Accueil fAibrik.dc.html. */

.diag-page { background: #fff; padding: 24px 0 72px; }
.diag-page-wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.diag-root { min-height: 60vh; }

/* Largeur de lecture : les écrans « une question à la fois » restent étroits,
   la grille des enjeux prend toute la largeur (4 colonnes sur grand écran). */
.diag-page .diag-screen--questions,
.diag-page .diag-screen--coords { max-width: 760px; margin: 0 auto; }
.diag-page .diag-screen--score { max-width: 760px; margin: 0 auto; }

/* Écran d'intro (rendu statique depuis content/diagnostic.md) */
.diag-intro { padding: 56px 0 48px; text-align: center; position: relative; }
.diag-intro::before,
.diag-intro::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.diag-intro::before { top: -40px; right: 4%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(206,22,25,.10), transparent 70%); }
.diag-intro::after { bottom: -40px; left: 4%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(206,22,25,.06), transparent 70%); }
.diag-intro > * { position: relative; z-index: 1; }

.diag-intro-tag {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--red-pale); color: var(--red);
  border-radius: 100px; padding: 9px 20px; margin-bottom: 22px;
  font-family: var(--font-title); font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.diag-intro h1 {
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 900; line-height: 1.12;
  letter-spacing: -1.3px; margin: 0 auto 16px; max-width: 640px; text-wrap: pretty;
}
.diag-intro h1 .accent { color: var(--red); }
.diag-intro-text { font-size: 17px; line-height: 1.65; color: var(--text); margin: 0 auto 28px; max-width: 520px; }

.diag-intro-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 32px; }
.diag-intro-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-a); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 18px; font-family: var(--font-title); font-size: 14px; font-weight: 600; color: var(--black);
}
.diag-intro-chip svg { color: var(--red); flex-shrink: 0; }

.diag-intro-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--red); color: #fff; border: none; cursor: pointer;
  padding: 17px 34px; border-radius: 16px;
  font-family: var(--font-title); font-size: 16.5px; font-weight: 700;
  box-shadow: 0 16px 34px -12px rgba(206,22,25,.55);
  transition: background .15s;
}
.diag-intro-cta:hover { background: var(--red-hover); }
.diag-intro-cta:focus-visible { outline: 3px solid rgba(206,22,25,.35); outline-offset: 3px; }
.diag-intro-note { margin: 22px 0 0; font-size: 14px; color: #a29ea6; }

@media (max-width: 640px) {
  .diag-page { padding: 8px 0 48px; }
  .diag-page-wrap { padding: 0 16px; }
  .diag-intro { padding: 36px 0 32px; }
  .diag-intro-text { font-size: 16px; }
  .diag-intro-cta { width: 100%; padding: 16px 20px; }
}