/* Scan IA & Sécurité : rapport partageable et présentation du robot. Grille de 8 px (jetons de cine.css). */
:root {
  --good: #8fe3b0; --mid: #ffcf7a; --bad: #ff9a85;
  --sev-bloquant: #ff9a85; --sev-important: #ffcf7a; --sev-conseil: var(--accent);
}
:root[data-fond="porcelaine"] { --good: #1f7a4a; --mid: #9a6400; --bad: #b4412c; --sev-bloquant: #b4412c; --sev-important: #9a6400; }

.scan { max-width: 760px; margin: 0 auto; padding: 128px var(--s3) var(--s8); }
.kicker { margin: 0 0 var(--s2); font: 400 12px/16px var(--mono); color: var(--accent); letter-spacing: .02em; }
.state h1 { margin: 0 0 var(--s2); font: 400 40px/48px var(--display); }
.state p { color: var(--m); }

/* En-tête : site + note */
.head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.who { min-width: 0; }
.who h1 { margin: 0; font: 400 40px/48px var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.when { margin: var(--s1) 0 0; font: 400 14px/24px var(--text); color: var(--f); }
.score { position: relative; flex: none; width: 128px; height: 128px; }
.score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score circle { fill: none; stroke-width: 8; }
.score .track { stroke: var(--line2); }
.score .arc { stroke: var(--sc, var(--accent)); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 1.2s var(--ease); }
.score .num { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 40px; }
.score b { font: 400 40px/48px var(--display); color: var(--sc, var(--t)); }
.score small { font: 400 14px/24px var(--text); color: var(--f); margin-left: 2px; }
.score.none b { color: var(--f); }
.note-text { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border: 1px solid var(--line2); border-radius: var(--s2); background: var(--panel); color: var(--m); font: 400 15px/24px var(--text); }
.note-text.cap { border-color: color-mix(in srgb, var(--sev-bloquant) 45%, transparent); }

/* Sans note globale : résultats point par point */
.lead-text { margin: var(--s4) 0 0; font: 400 17px/28px var(--text); color: var(--t); }
.checks { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.checks li { display: grid; grid-template-columns: 32px 1fr; gap: 4px var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line2); border-radius: var(--s2); background: var(--panel); }
.checks .mark { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 500 16px/1 var(--text); color: var(--c); border: 1px solid var(--c); }
.checks li[data-ok="true"] { --c: var(--good); }
.checks li[data-ok="false"] { --c: var(--bad); }
.checks li[data-ok="null"] { --c: var(--f); }
.checks b { font: 500 15px/24px var(--text); color: var(--t); }
.checks span { font: 400 15px/24px var(--text); color: var(--m); }
.checks a { color: var(--accent); }
.note-text.radar { border-color: rgba(var(--accent-rgb), .35); color: var(--t); }

/* Détail par partie */
.parts { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.parts li { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s2); align-items: baseline; }
.parts .label { font: 400 15px/24px var(--text); color: var(--t); }
.parts .val { font: 400 13px/16px var(--mono); color: var(--m); }
.parts .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.parts .bar i { display: block; height: 100%; width: 0; background: var(--pc, var(--accent)); border-radius: 2px; transition: width 1s var(--ease); }
.parts .untested { grid-column: 1 / -1; font: 400 13px/20px var(--text); color: var(--f); }
.parts .untested a { color: var(--m); }

/* Blocs */
.block { margin-top: var(--s8); }
.block h2 { margin: 0 0 var(--s3); font: 400 28px/32px var(--display); letter-spacing: -.01em; }
.problems { display: grid; gap: var(--s2); }
.problem { padding: var(--s3); border: 1px solid var(--line2); border-left: 3px solid var(--sev); border-radius: var(--s2); background: var(--panel); }
.problem[data-sev="bloquant"] { --sev: var(--sev-bloquant); }
.problem[data-sev="important"] { --sev: var(--sev-important); }
.problem[data-sev="conseil"] { --sev: var(--sev-conseil); }
.chip { display: inline-block; margin-bottom: var(--s1); font: 400 12px/16px var(--mono); color: var(--sev); text-transform: uppercase; letter-spacing: .06em; }
.problem h3 { margin: 0 0 var(--s1); font: 500 18px/24px var(--text); color: var(--t); }
.problem p { margin: 0 0 var(--s2); font: 400 15px/24px var(--text); color: var(--m); }
.problem dl { margin: 0; display: grid; gap: var(--s2); }
.problem dt { font: 400 12px/16px var(--mono); color: var(--f); text-transform: uppercase; letter-spacing: .06em; }
.problem dd { margin: var(--s1) 0 0; font: 400 15px/24px var(--text); color: var(--t); }
.problem ul { margin: 0 0 var(--s2); padding-left: var(--s3); color: var(--m); font: 400 14px/24px var(--text); }
.good, .infos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.good li { position: relative; padding-left: var(--s3); color: var(--m); }
.good li::before { content: "✓"; position: absolute; left: 0; color: var(--good); }
.infos li { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--s2); }
.infos b { display: block; font: 500 15px/24px var(--text); color: var(--t); }
.infos span { color: var(--m); font: 400 15px/24px var(--text); }
.infos a { color: var(--accent); }

/* Suite */
.next { margin-top: var(--s8); padding: var(--s6) var(--s4); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: var(--s4); text-align: center; display: grid; justify-items: center; gap: var(--s2);
  background: radial-gradient(80% 60% at 50% 0%, rgba(var(--accent-rgb), .08), transparent 70%), var(--panel); }
.fine { margin: 0; font: 400 13px/20px var(--text); color: var(--f); }
.fine a { color: var(--m); }
.share { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s2); flex-wrap: wrap; }
.copied { font: 400 13px/20px var(--text); color: var(--good); }

.foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); max-width: 760px; margin: 0 auto; padding: var(--s4) var(--s3); border-top: 1px solid var(--line); font: 400 14px/24px var(--text); color: var(--f); }
.foot a { color: var(--m); text-decoration: none; }

/* Page « notre robot » */
.doc p, .doc li { font: 400 16px/28px var(--text); color: var(--m); }
.doc h1 { margin: 0 0 var(--s3); font: 400 40px/48px var(--display); letter-spacing: -.02em; }
.doc h2 { margin: var(--s6) 0 var(--s2); font: 400 24px/32px var(--display); }
.doc b { color: var(--t); font-weight: 500; }
.doc a { color: var(--t); }
.doc pre { margin: 0 0 var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line2); border-radius: var(--s2); background: var(--panel); font: 400 13px/20px var(--mono); color: var(--t); overflow-x: auto; }

@media (max-width: 760px) {
  .scan { padding: 96px var(--s2) var(--s6); }
  .head { flex-direction: column-reverse; align-items: flex-start; gap: var(--s3); }
  .who h1 { font-size: 32px; line-height: 40px; }
  .score { width: 112px; height: 112px; }
  .score .num { padding-top: 32px; }
  .problem { padding: var(--s2); }
  .next { padding: var(--s4) var(--s2); }
  .next .btn { width: 100%; justify-content: center; }
  .foot { flex-wrap: wrap; padding: var(--s3) var(--s2); }
}
@media (prefers-reduced-motion: reduce) { .score .arc, .parts .bar i { transition: none; } }
.scan [hidden] { display: none !important; }   /* les listes en grille restent masquées tant que le script ne les montre pas */