/* Théorie colorée, isolée de la simulation existante. */
.cybersecurite .password-shortcuts { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.cybersecurite .password-shortcuts a { padding:.45rem .8rem; border-radius:999px; background:var(--white); border:1px solid color-mix(in srgb,var(--apple-b) 25%,var(--white)); color:var(--accent2); font-size:.9rem; text-decoration:none; }
.cybersecurite .password-shortcuts a:hover { background:var(--cyan-bg); }
.cybersecurite .password-theory { color:var(--text); line-height:1.75; }
.cybersecurite .password-theory section { border-bottom:none; padding-bottom:0; --section-color:var(--apple-b); margin-top:3.5rem; padding-top:1.5rem; border-top:3px solid color-mix(in srgb,var(--section-color) 30%,var(--white)); }
.cybersecurite .password-theory section:nth-child(2) { --section-color:var(--apple-p); }
.cybersecurite .password-theory section:nth-child(3) { --section-color:var(--apple-g); }
.cybersecurite .password-theory section:nth-child(4) { --section-color:var(--apple-o); }
.cybersecurite .password-theory .password-kicker { color:color-mix(in srgb,var(--section-color) 75%,var(--text)); font-size:.75rem; letter-spacing:.12em; font-weight:800; margin:0 0 .55rem; }
.cybersecurite .password-theory h2 { scroll-margin-top:calc(var(--nav-height,64px) + 1.5rem); margin-top:0; }
.cybersecurite .password-theory h3 { font-size:1.1rem; margin:1rem 0 .5rem; }
.cybersecurite .password-theory p { margin:.75rem 0; }
.cybersecurite .password-theory ul,
.cybersecurite .password-theory ol { padding-left:1.4rem; }
.cybersecurite .password-theory li { margin:.5rem 0; }
.cybersecurite .password-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.cybersecurite .password-cards article { --card-color:var(--apple-b); padding:1.25rem 1.5rem; background:linear-gradient(135deg,color-mix(in srgb,var(--card-color) 7%,var(--white)),var(--white) 75%); border:1px solid color-mix(in srgb,var(--card-color) 20%,var(--white)); border-top:4px solid var(--card-color); border-radius:14px; box-shadow:0 4px 16px color-mix(in srgb,var(--card-color) 5%,transparent); }
.cybersecurite .password-cards article:nth-child(2) { --card-color:var(--apple-p); }
.cybersecurite .password-cards article:nth-child(3) { --card-color:var(--apple-g); }
.cybersecurite .password-cards article:nth-child(4) { --card-color:var(--apple-o); }
.cybersecurite .password-cards h3 { margin-top:0; color:color-mix(in srgb,var(--card-color) 70%,var(--text)); }
.cybersecurite .password-note { border-left:4px solid var(--apple-o); border-radius:0 10px 10px 0; background:color-mix(in srgb,var(--apple-y) 10%,var(--white)); padding:1rem 1.25rem; }
.cybersecurite .password-theory .password-steps { list-style:none; padding:0; display:grid; gap:.75rem; margin:1.5rem 0; }
.cybersecurite .password-steps li { display:flex; gap:1rem; align-items:flex-start; margin:0; }
.cybersecurite .password-steps li > span { flex:none; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:12px; background:color-mix(in srgb,var(--apple-p) 9%,var(--white)); color:var(--apple-p); font-weight:800; font-family:var(--fm); }
.cybersecurite .password-steps p { margin:.25rem 0 .5rem; }
.cybersecurite .password-workshop { margin:2rem 0 1.5rem; padding:1.75rem; border:1px solid color-mix(in srgb,var(--apple-b) 30%,var(--white)); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--apple-b) 9%,var(--white)),color-mix(in srgb,var(--apple-p) 5%,var(--white))); box-shadow:0 8px 28px color-mix(in srgb,var(--apple-b) 9%,transparent); }
.cybersecurite .password-workshop-heading { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; }
.cybersecurite .password-workshop-icon { display:grid; place-items:center; flex:none; width:3rem; height:3rem; border-radius:14px; background:var(--apple-p); color:var(--white); font-size:1.75rem; }
.cybersecurite .password-workshop-heading h3 { margin:0; font-size:1.4rem; }
.cybersecurite .password-workshop-heading .password-kicker { margin:0 0 .2rem; }
.cybersecurite .password-workshop label,
.cybersecurite .password-field-title { display:block; margin-top:1.2rem; font-weight:700; }
.cybersecurite .password-workshop textarea { display:block; width:100%; box-sizing:border-box; resize:vertical; padding:1rem; margin:.5rem 0; background:var(--white); color:var(--text); border:2px solid color-mix(in srgb,var(--apple-b) 25%,var(--white)); border-radius:12px; font:inherit; }
.cybersecurite .password-rules { font-size:.8rem; color:var(--text2); }
.cybersecurite .password-tokens { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 1.5rem; }
.cybersecurite .password-token { --token-color:var(--accent2); display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:.35rem; min-width:3rem; max-width:100%; padding:.55rem .7rem; border:1px solid color-mix(in srgb,var(--token-color) 22%,var(--white)); border-radius:10px; background:var(--white); }
.cybersecurite .password-token span { font-size:.75rem; overflow-wrap:anywhere; color:var(--text2); }
.cybersecurite .password-token strong { color:var(--token-color); font:700 1.3rem var(--fm); }
.cybersecurite .password-token-capital { --token-color:var(--apple-p); background:color-mix(in srgb,var(--apple-p) 7%,var(--white)); }
.cybersecurite .password-token-number { --token-color:var(--green); background:color-mix(in srgb,var(--apple-g) 8%,var(--white)); }
.cybersecurite .password-token-symbol { --token-color:var(--amber); background:color-mix(in srgb,var(--apple-y) 12%,var(--white)); }
.cybersecurite .password-result { margin-top:1rem; padding:1.4rem; background:var(--white); border:1px solid color-mix(in srgb,var(--apple-p) 20%,var(--white)); border-radius:14px; }
.cybersecurite .password-result-label { font-size:.9rem; font-weight:700; }
.cybersecurite .password-result output { display:block; color:var(--apple-p); font:700 clamp(1.6rem,4vw,2.3rem) var(--fm); letter-spacing:.03em; overflow-wrap:anywhere; margin:.5rem 0; }
.cybersecurite #phrase-count { display:inline-block; padding:.2rem .65rem; border-radius:999px; background:var(--cyan-bg); color:var(--accent2); font-size:.8rem; font-weight:700; }
.cybersecurite #phrase-feedback { font-size:.9rem; }
.cybersecurite .password-example-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.cybersecurite .password-details { padding:1rem 1.25rem; border:1px solid color-mix(in srgb,var(--section-color) 24%,var(--white)); border-radius:12px; background:var(--white); margin-top:1rem; }
.cybersecurite .password-details summary { cursor:pointer; font-weight:700; }
.cybersecurite .password-theory code { padding:.1rem .3rem; border-radius:4px; background:var(--cyan-bg); color:var(--accent2); overflow-wrap:anywhere; }
.cybersecurite .password-theory a:not(.btn-primary) { color:var(--accent2); text-underline-offset:.2em; }
.cybersecurite .password-sources { font-size:.85rem; }
.cybersecurite .password-theory :focus-visible,
.cybersecurite .password-shortcuts a:focus-visible { outline:3px solid var(--apple-b); outline-offset:4px; }
@media (max-width:600px) {
  .cybersecurite .password-cards { grid-template-columns:1fr; }
  .cybersecurite .password-workshop { padding:1rem; border-radius:14px; }
  .cybersecurite .password-workshop-heading h3 { font-size:1.15rem; }
  .cybersecurite .password-result { padding:1rem; }
  .cybersecurite .password-example-actions > button { width:100%; }
  .cybersecurite .lecon-doc .lecon-main { padding:1.25rem !important; }
}