/* Styles propres au scanner, scopés sous .scan et quelques id/classes
   dédiés, pour s'appuyer sur la charte (/css/style.css) sans collision.
   On réutilise les variables de la charte : --rouge --bleu --vert --encre
   --gris --carte --trait --rayon --lien. */

/* Bouton de langue dans l'en-tête, au look des liens de langue de la charte. */
.nav button.langue {
  background: transparent; border: 0; cursor: pointer;
  font-size: .85rem; color: var(--gris); align-self: center;
  margin-left: 10px; padding: 6px 0 6px 18px; border-left: 1px solid var(--trait);
}
.nav button.langue:hover { color: var(--lien); }

.scan { padding: 8px 0 56px; }

.scan form { margin: 0 0 8px; }
.scan label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--encre); }
.scan .ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.scan input[type="text"] {
  flex: 1 1 260px; min-width: 0; padding: 12px 14px; font-size: 1rem;
  background: var(--carte); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--rayon);
}
.scan input[type="text"]:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; }
.scan .aide { color: var(--gris); font-size: .88rem; margin: 8px 0 0; }

.scan .resultat {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 20px; margin-top: 16px;
}
.scan .score-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.scan .jauge {
  --v: 0; width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: 1.3rem;
  background: conic-gradient(var(--teinte) calc(var(--v) * 1%), var(--trait) 0);
}
.scan .jauge span { background: var(--carte); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--encre); }
.scan .resume h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--encre); }
.scan .resume p { margin: 0; color: var(--gris); font-size: .9rem; }
.scan ul.constats { list-style: none; padding: 0; margin: 8px 0 0; }
.scan ul.constats li { padding: 10px 0; border-top: 1px solid var(--trait); display: flex; gap: 10px; align-items: flex-start; }
.scan .puce { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; }
.scan .g-critique .puce { background: var(--rouge); }
.scan .g-important .puce { background: #d98c00; }
.scan .g-modere .puce { background: var(--gris); }
.scan .badge-wd {
  display: inline-block; background: var(--lien); color: #fff; font-size: .75rem;
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
.scan .accroche {
  margin-top: 16px; padding: 14px; border-radius: var(--rayon);
  background: color-mix(in srgb, var(--lien) 12%, transparent); font-size: .92rem;
}
.scan .erreur { color: var(--rouge); }