*{box-sizing:border-box}body{font:1rem/1.6 system-ui,sans-serif;margin:0;background:#f5f6fa;color:#17223a}main{max-width:850px;margin:auto;padding:20px}header{background:#142640;color:white;padding:20px}header a{color:#fff}h1{font-size:1.7rem}h2{font-size:1.25rem}section,.panel{background:white;border:1px solid #d5dbe6;border-radius:14px;padding:20px;margin:18px 0}button,select{font:inherit;min-height:44px;padding:9px 13px;border:2px solid #355f99;border-radius:9px;background:white;color:#132d52;cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:4px solid #f3ae36;outline-offset:3px}button[aria-pressed=true]{background:#173e73;color:white}fieldset{border:1px solid #bbc6d6;border-radius:10px;margin:12px 0}legend{font-weight:700}label{display:block;padding:6px}input{min-width:20px;min-height:20px;vertical-align:middle} .actions{display:flex;flex-wrap:wrap;gap:10px} .muted{color:#46536a} .feedback{border-left:5px solid #316b55;background:#edf8f1;padding:14px;margin-top:12px} .preview{padding:20px;border:2px solid #8496af;border-radius:10px;background:#fff} .preview h3{margin-top:0}.small{font-size:.9rem} @media(max-width:500px){main{padding:12px}section{padding:14px}button{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* M03 : fenêtre de navigateur fictif, sans iframe ni accès réseau */
.browser-frame{border:2px solid #8496af;border-radius:14px;overflow:hidden;background:white}
.browser-toolbar{display:flex;gap:12px;align-items:center;padding:10px 12px;background:#e9edf3;border-bottom:1px solid #b7c4d3;color:#334155;font-size:.86rem}
.browser-dots{letter-spacing:2px;color:#65748a;white-space:nowrap}.browser-address{min-width:0;overflow-wrap:anywhere;background:white;border:1px solid #b9c4d3;border-radius:7px;padding:4px 10px;flex:1}
.browser-page.preview{border:0;border-radius:0;min-height:220px;padding:24px}.browser-page h3{font-size:1.35rem}
#codeDetails{margin-top:18px}#codeDetails summary{cursor:pointer;font-weight:700;padding:10px 0}#codeDetails pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f1f5f9;border-radius:8px;padding:12px;font-size:.9rem}
@media(max-width:500px){.browser-page.preview{padding:16px}.browser-toolbar{gap:6px;padding:8px}.browser-dots{font-size:.7rem}}

/* M09 : visualisation fictive des permissions, lisible sur mobile */
.permission-simulator {border:2px solid #8c9bae;border-radius:16px;overflow:hidden;background:#fff;color:#19263d}
.simulator-bar {display:flex;gap:1rem;align-items:center;padding:.8rem 1rem;background:#e9edf3;border-bottom:1px solid #aeb8c5;flex-wrap:wrap;font-size:.88em}
.simulator-content {padding:1rem}
.simulator-item {border:1px solid #c7cfd9;border-radius:12px;padding:.8rem 1rem;margin-bottom:.8rem}
.simulator-item p {margin:.4rem 0 0}
.access-state {font-weight:700;color:#225a4a}
.access-state.excess-access {color:#963c2e}
.simulator-summary {border-left:5px solid #33725b;background:#eaf5ef;padding:.8rem 1rem}
@media(max-width:420px) {.simulator-content{padding:.65rem}.simulator-item{padding:.7rem}}

.simulator-document {padding:.45rem .65rem;background:#f3f5f8;border-radius:6px;overflow-wrap:anywhere}