/* ═══════════════════════════════════════════════════════════════
   Surcharges site du bloc autodiagnostic
   ═══════════════════════════════════════════════════════════════

   POURQUOI CE FICHIER EXISTE.
   css/autodiagnostic.css est le paquet livré par Claude Design. Il sera
   remplacé à l'identique par sa version corrigée. Tout ce qui relève de
   l'intégration au site — et non du composant lui-même — vit ici, pour
   survivre à ce remplacement.

   À charger APRÈS css/autodiagnostic.css.
   Consommateurs : index.html, accompagnement-ia.html. */


/* ── 1. Garde de portage ─────────────────────────────────────────
   accompagnement-ia.html déclare « h2 { color: var(--navy) } ». La couleur du
   titre du bloc n'est qu'héritée, et l'héritage perd contre un sélecteur
   d'élément : « Où en est » et « ? » s'affichaient en navy sur navy, seul
   l'<em> doré restait lisible.
   :where() ne pèse rien en spécificité : cette règle bat les balises nues
   (0,0,1) et cède aux règles de classe du paquet (0,1,0).
   À supprimer si la version corrigée du paquet donne à chaque élément textuel
   sa propre couleur — ce qu'elle annonce. */
.jls-diag :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote) {
  color: inherit;
  margin: 0;
}


/* ── 2. Mobile : la sphère passe avant le questionnaire ──────────
   Le panneau est une grille en repeat(auto-fit, minmax(340px, 1fr)), donc sans
   point de rupture déclaré. Deux colonnes exigent 340 + 340 + 48 = 728px de
   contenu ; s'y ajoutent les 84px de padding du panneau et les 80px de
   .jls-diag__inner, soit 892px de fenêtre. En dessous, une seule colonne.

   grid-template-columns est forcé ici plutôt que laissé à auto-fit : le
   résultat devient déterministe et ne dépend plus d'un calcul au pixel près,
   qu'une barre de défilement suffirait à décaler.

   L'ordre du DOM n'est pas modifié — le questionnaire reste lu en premier. */
@media (max-width: 892px) {
  .jls-diag__panel {
    grid-template-columns: 1fr;
  }
  .jls-diag__viz {
    order: -1;
  }
}


/* ── 3. Accroche : le bloc replié sur sa seule sphère ────────────
   Sur l'accueil, le bloc est posé juste sous le bouton et ne montre d'abord que
   sa sphère et sa légende. Le clic sur « Tester ma maturité IA » le déplie, sans
   retour possible — le visiteur est venu pour répondre.

   LA CLASSE EST POSÉE PAR LE SCRIPT, JAMAIS DANS LE HTML. Écrit en dur, le repli
   rendrait le questionnaire inatteignable à qui n'exécute pas de JavaScript. Posé
   au chargement, il ne retire rien : sans script, le bloc s'affiche entier.

   Le panneau étant en repeat(auto-fit, …), masquer la colonne du questionnaire
   suffit à recentrer la sphère : il ne reste qu'un enfant, donc une colonne. */
.jls-diag.is-teaser .jls-diag__head,
.jls-diag.is-teaser .jls-diag__col {
  display: none;
}