* { box-sizing: border-box; }
:root { color-scheme: light; font-family: system-ui, sans-serif; color: #193334; background: #f1f5f2; }
body { margin: 0; }
header, main, footer { max-width: 1440px; margin: auto; padding: 28px 36px; }
header { padding-top: 32px; }
a { color: #21645a; text-underline-offset: 4px; }
.eyebrow { margin: 32px 0 10px; font-size: .75rem; font-weight: 750; letter-spacing: .18em; color: #397365; }
header h1 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.045em; margin: 0; }
header > p:last-child { color: #566b66; font-size: 1.1rem; }
main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 24px; padding-top: 8px; }
.panel { min-width: 0; background: #fff; border: 1px solid #d8e3dc; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 32px #19333405; }
.toolbar { padding: 22px 24px; background: #e6eee8; border-bottom: 1px solid #d8e3dc; }
label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 9px; }
select { display: block; width: 100%; min-width: 0; padding: 12px; font: inherit; color: #193334; background: white; border: 1px solid #a8bfb2; border-radius: 8px; }
select:focus-visible, a:focus-visible { outline: 3px solid #c28131; outline-offset: 3px; }
#PAGE_atome { padding: 24px 30px 32px; line-height: 1.75; overflow-wrap: anywhere; overflow-x: auto; }
#PAGE_atome h1 { font-size: 1.65rem; line-height: 1.25; margin-top: 0; }
#PAGE_atome img { max-width: 100%; height: auto; }
#PAGE_atome table { border-collapse: collapse; max-width: 100%; font-size: .9rem; }
#PAGE_atome td, #PAGE_atome th { border: 1px solid #cbd9cf; padding: 8px; }
.drawing { padding: 16px; min-height: 230px; display: grid; place-items: center; }
canvas { width: 100%; height: auto; }
[hidden] { display: none !important; }
#empty-atom { max-width: 240px; text-align: center; color: #667b72; line-height: 1.7; }
#atom-caption { padding: 0 24px; font-weight: 600; line-height: 1.6; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 24px; font-size: .85rem; }
.proton_texte { color: #b52626; font-weight: bold; }
.neutron_texte { color: #244cad; font-weight: bold; }
.electron_texte { color: #222; font-weight: bold; }
.note { margin: 0; padding: 18px 24px; background: #f8faf7; color: #617168; font-size: .8rem; line-height: 1.6; }
.flex_centrer_verticalement_row { display: flex; align-items: center; gap: 8px; }
.flex_centrer_verticalement_column { flex: 1; min-width: 0; }
footer { color: #667b72; font-size: .8rem; }
@media (max-width: 800px) { header, main, footer { padding: 22px 16px; } main { grid-template-columns: 1fr; } #PAGE_atome { padding: 22px; } .eyebrow { margin-top: 24px; } }