/* Diagnostic « IA de l'ombre » (FR /fr/diagnostic-ia-de-l-ombre/, EN /shadow-ai-diagnostic/) — par-dessus blog.css et conformite.css.
   À l'impression : le résultat seul, sur une page A4. */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible { outline: 2px solid #5B3FE0; outline-offset: 2px; border-radius: 4px; }

.privacy { background: #E6F6EF; border: 1px solid #BFE6D3; border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.55; margin: 0 0 32px; }
.privacy b { color: #11603F; }
.nojs { background: #FFF4DE; border-radius: 10px; padding: 10px 14px; font-size: 15px; }

/* Les questions. */
.group { margin: 0 0 8px; }
.group h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 40px 0 14px; }
.group h2 small { font: 500 13px var(--mono); color: var(--muted); letter-spacing: 0; }
.q { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 18px; margin: 0 0 14px; min-width: 0; }
.q.answered { border-color: #CFC4FF; }
.q legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-weight: 600; font-size: 17px; line-height: 1.45; }
.q legend .n { display: inline-block; min-width: 26px; margin-right: 8px; font: 700 13px/1.7 var(--mono); color: var(--white); background: var(--key); border-radius: 6px; text-align: center; vertical-align: 1px; }
.opts { clear: both; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
@media (max-width: 480px) { .opts { grid-template-columns: 1fr; } }
.opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15.5px; line-height: 1.4; cursor: pointer; background: var(--paper); }
.opt:hover { border-color: #A99AFF; }
.opt input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #5B3FE0; }
.opt:has(input:checked) { background: var(--key-soft); border-color: var(--key); }
.opt:has(input:focus-visible) { outline: 2px solid #5B3FE0; outline-offset: 2px; }
@media (max-width: 600px) { .q { padding: 14px 14px 16px; } .q legend { font-size: 16px; } }

/* Le résultat. */
.result { background: var(--white); border: 2px solid var(--key); border-radius: 16px; padding: 22px 24px 18px; margin: 48px 0 24px; scroll-margin-top: 16px; }
@media (max-width: 600px) { .result { padding: 18px 16px 14px; } }
.result h2 { margin: 0 0 14px; }
.result h3 { font: 700 12.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 24px 0 10px; }
.score { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.score .big { font: 700 52px/1 var(--sans); letter-spacing: -0.03em; }
.score .big small { font-size: 22px; color: var(--muted); letter-spacing: 0; font-weight: 600; }
.score .k { display: block; font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.result .k-done { display: none; }
.result.done .k-done { display: block; }
.result.done .k-partial { display: none; }
.left { margin: 0; font-weight: 600; color: #5B3FE0; }
.lvl { flex: 1 1 260px; border-radius: 12px; padding: 12px 14px; }
.lvl p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.lvl .lvl-name { font-weight: 700; font-size: 18px; margin-bottom: 2px; }
.lvl-controlled { background: #E6F6EF; } .lvl-controlled .lvl-name { color: #11603F; }
.lvl-framework { background: #FFF4DE; } .lvl-framework .lvl-name { color: #7A4B00; }
.lvl-exposed { background: #FDE8E8; } .lvl-exposed .lvl-name { color: #A11B1B; }

.areas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.areas li { display: grid; grid-template-columns: minmax(0, 190px) 1fr 64px; align-items: center; gap: 12px; margin: 0; font-size: 15px; }
.areas .bar { height: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.areas .fill { display: block; height: 100%; width: 0; background: var(--key); transition: width .2s; }
.areas .pts { font: 600 14px var(--mono); text-align: right; white-space: nowrap; }
@media (max-width: 480px) { .areas li { grid-template-columns: 1fr 64px; gap: 4px 12px; } .areas .bar { grid-column: 1 / -1; grid-row: 2; } }

.prio { list-style: none; counter-reset: p; padding: 0; margin: 0; }
.prio li { counter-increment: p; position: relative; padding: 10px 0 10px 40px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; margin: 0; }
.prio li:first-child { border-top: 0; }
.prio li::before { content: counter(p); position: absolute; left: 0; top: 11px; width: 26px; font: 700 13px/1.7 var(--mono); color: var(--white); background: var(--key); border-radius: 6px; text-align: center; }
.prio .area-tag { font: 600 11px/1.6 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: #4B2FD6; background: var(--key-soft); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.step { background: var(--paper); border-left: 3px solid var(--key); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 0; font-size: 15.5px; }
.step .dur { display: block; font: 500 13px var(--mono); color: var(--muted); margin-top: 2px; }

.res-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.res-actions .btn { text-align: center; }
.btn.line { border: 1px solid var(--line); color: var(--text); background: var(--white); }
.btn.line:hover { border-color: var(--key); }
.res-send { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.res-tools { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; }
.res-tools button { font: 600 14.5px var(--sans); padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); color: var(--text); cursor: pointer; }
.res-tools button:hover { border-color: var(--key); }
.res-note { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }

/* La barre du bas : le score pendant qu'on répond. */
.diag-bar { display: none; }
.js .diag-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; justify-content: center; align-items: center; gap: 8px 16px; flex-wrap: wrap; background: var(--ink); color: var(--on-ink); padding: 10px 16px; font-size: 15px; border-top: 1px solid var(--line-ink); transition: transform .2s; }
.js .diag-bar.off { transform: translateY(110%); }
.diag-bar b { font: 700 16px var(--mono); }
.diag-bar .bar-left { color: var(--on-ink-muted); }
.diag-bar a { color: var(--white); font-weight: 600; background: var(--key); padding: 6px 12px; border-radius: 8px; text-decoration: none; }
.js body { padding-bottom: 64px; }
@media (max-width: 480px) {
  .js .diag-bar { flex-wrap: nowrap; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 16px; }
  .diag-bar .lbl { display: none; }
  .diag-bar > span { white-space: nowrap; }
  .diag-bar .bar-left { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .diag-bar a { flex: none; padding: 6px 10px; }
  .js body { padding-bottom: 56px; }
  .res-actions .btn { flex: 1 1 100%; }
}

.how table td:nth-child(-n+2) { white-space: nowrap; }

/* Impression : le résultat seul, une page A4. */
@media print {
  .js body { padding-bottom: 0; }
  body { font-size: 10pt; line-height: 1.45; }
  .top, .crumbs, h1, .lede, .meta, .privacy, .nojs, #diag, .diag-bar, .how, .cta, .res-actions, .res-send, .res-tools, footer .links, #ht-consent { display: none !important; }
  footer { margin-top: 10px; padding-top: 6px; font-size: 7.5pt; }
  .result { border: 1px solid #bbb; border-radius: 10px; margin: 0; padding: 14px 18px 10px; break-inside: avoid; }
  .result h2 { font-size: 16pt; margin: 0 0 8px; }
  .result h3 { font-size: 8.5pt; margin: 12px 0 6px; }
  .score .big { font-size: 34pt; }
  .score .big small { font-size: 14pt; }
  .lvl p { font-size: 9.5pt; }
  .lvl .lvl-name { font-size: 12pt; }
  .areas { gap: 4px; }
  .areas li { font-size: 9.5pt; grid-template-columns: 150px 1fr 64px; }
  .areas .bar { grid-column: auto; grid-row: auto; height: 8px; }
  .areas .pts { font-size: 9pt; }
  .prio li { font-size: 9.5pt; line-height: 1.45; padding: 6px 0 6px 32px; }
  .prio li::before { top: 7px; width: 22px; font-size: 9pt; }
  .step { font-size: 9.5pt; padding: 6px 10px; }
  .res-note { font-size: 8pt; margin-top: 8px; }
  .lvl, .areas .bar, .areas .fill, .prio li::before, .prio .area-tag, .step { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .areas .fill { transition: none; }
}