/* Page d'accueil du Diagnostic (M10-T27). Direction A « Verre » (docs/design/direction-visuelle.md).
   Aucune valeur de couleur, de police ni d'ombre ici : tout vient des jetons de @bb/ui, copiés dans
   dist/ par construire.mjs. Le thème sombre suit prefers-color-scheme. Lisible dès 360 px. */
:root {
  --fond: var(--background);
  --texte: var(--foreground);
  --discret: var(--muted-foreground);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: var(--graisse-corps) 1.0625rem/1.55 var(--police);
  font-optical-sizing: auto;
  font-feature-settings: var(--police-reglages);
}
main { max-width: 64rem; margin: 0 auto; padding: 3.5rem 1rem 1.5rem; display: grid; gap: 1rem; }

/* Entrée : titre, accroche, un seul appel à l'action. */
.entree { padding: 1rem 0 2rem; max-width: 46rem; }
h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.125rem, 1.4rem + 3.6vw, 3.75rem);
  font-weight: var(--graisse-phare);
  line-height: var(--interligne-serre);
  letter-spacing: var(--approche-phare);
  text-wrap: balance;
}
.accroche { max-width: var(--mesure-texte); margin: 0 0 1.75rem; font-size: 1.1875rem; color: var(--discret); text-wrap: pretty; }
.appel { margin: 0 0 0.875rem; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible-tactile); padding: 0.75rem 1.75rem;
  border-radius: var(--radius-capsule);
  background: var(--primary); color: var(--primary-foreground);
  font-weight: var(--graisse-titre); font-size: 1.0625rem; text-decoration: none;
  box-shadow: var(--ombre-2), var(--verre-arete);
  transition: transform var(--duree-appui) var(--courbe-sortie), box-shadow var(--duree-rapide) var(--courbe-sortie);
}
.bouton:hover { box-shadow: var(--ombre-3), var(--verre-arete); }
.bouton:active { transform: scale(var(--echelle-appui)); }
.bouton:focus-visible, .pied a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.duree { margin: 0; color: var(--discret); font-size: var(--texte-base); }

/* Plaques de verre. */
.plaque {
  background: var(--card);
  border: 1px solid var(--verre-bord);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-1), var(--verre-arete);
  padding: 1.5rem 1.25rem;
  min-width: 0;
}
@supports (backdrop-filter: blur(1px)) {
  .plaque { backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-saturation)); }
}
h2 { margin: 0 0 1rem; font-size: var(--texte-lg); font-weight: var(--graisse-titre); line-height: var(--interligne-titre); letter-spacing: var(--approche-titre); }
h3 { margin: 0 0 0.25rem; font-size: var(--texte-md); font-weight: var(--graisse-titre); letter-spacing: var(--approche-titre); }
p { margin: 0; }
ol, dl { margin: 0; padding: 0; list-style: none; }

/* Trois points, numérotés, chacun sa teinte de données. */
.points ol { display: grid; gap: 1.5rem; }
.point { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.point p { color: var(--discret); text-wrap: pretty; }
.numero {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  font-weight: var(--graisse-valeur); font-variant-numeric: tabular-nums;
  color: var(--teinte); background: color-mix(in oklch, var(--teinte) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--teinte) 34%, transparent);
}
.point:nth-child(1) { --teinte: var(--serie-1); }
.point:nth-child(2) { --teinte: var(--serie-2); }
.point:nth-child(3) { --teinte: var(--serie-3); }

/* Étapes : nom, détail, durée. */
.phase { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.phase:first-child { border-top: 0; padding-top: 0; }
.phase-nom { font-weight: var(--graisse-titre); }
.phase-detail { grid-column: 1; color: var(--discret); font-size: var(--texte-base); }
.phase-duree { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; font-weight: var(--graisse-valeur); color: var(--accent-foreground); }

/* Assistant IA : teinte d'information, bien visible. */
.assistant { background: color-mix(in oklch, var(--info) 10%, var(--card)); }
.assistant p { max-width: var(--mesure-texte); font-size: 1.25rem; line-height: 1.45; font-weight: var(--graisse-libelle); }

/* Données. */
.ligne { display: grid; gap: 0.125rem; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.ligne:first-child { border-top: 0; padding-top: 0; }
dt { font-weight: var(--graisse-titre); }
dd { margin: 0; color: var(--discret); text-wrap: pretty; }

/* Pied : mention courte et lien vers la notice. */
.pied { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; font-size: var(--texte-sm); color: var(--discret); }
.pied p { max-width: 52rem; }
.pied a { color: var(--accent-foreground); text-underline-offset: 0.2em; }

@media (min-width: 48rem) {
  main { padding-top: 5.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .entree, .points { grid-column: 1 / -1; }
  .plaque { padding: 2rem; }
  .points ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .point { grid-template-columns: 1fr; gap: 0.75rem; align-content: start; }
  .assistant { align-self: start; }
  .donnees { grid-column: 1 / -1; }
  .donnees dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .ligne, .ligne:first-child { border-top: 0; padding: 0; }
  .pied { padding-inline: 1rem; }
}

@media (prefers-reduced-transparency: reduce) {
  .plaque { background: var(--card-opaque); backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }