/* Guide presentation: shared tokens, accessible navigation and readable diagrams. */
.guides-page { --accent: #087d70; --accent-dk: #08685e; --text-light: #627386; }
.guides-page a:focus-visible, .guides-page button:focus-visible, .guides-page summary:focus-visible, .guides-page [tabindex]:focus-visible { outline: 3px solid #087d70; outline-offset: 4px; }
.guides-page .nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.guides-page .dropdown::before { content: ''; position: absolute; top: -8px; height: 8px; width: 100%; left: 0; }
.guides-page .nav-item:focus-within > .nav-link { background: var(--accent-lt); color: var(--accent-dk); }
.guides-page .footer-tagline, .guides-page .footer-col a, .guides-page .footer-bottom, .guides-page .footer-bottom a { color: #bbc7d4; }
.guides-page .footer-col h4 { color: #d8e2ed; font-size: .75rem; }
.guides-page .qn-label { color: #bbc7d4; }
.guides-page .qn-links a { color: #c8d3df; }
.guides-page .content-main p a, .guides-page .content-main li a { color: var(--accent-dk); text-decoration: underline; text-underline-offset: .17em; }
.guides-page .content-main a:hover { text-decoration-thickness: 2px; }
.guides-page .content-main h2, .guides-page .content-main h3 { scroll-margin-top: 120px; }
.guides-page .table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--border-dk); border-radius: 8px; }
.guides-page .table-wrap::before { content: 'Tableau : faire défiler horizontalement si nécessaire'; display: block; padding: 10px 14px; background: var(--bg-alt); color: var(--text-muted); font-size: .8rem; }
.guides-page .content-main .table-wrap > table { display: table; width: 100%; min-width: 570px; border-collapse: collapse; font-size: .9rem; }
.guides-page .table-wrap th, .guides-page .table-wrap td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.6; }
.guides-page .table-wrap th { background: var(--bg-alt); font-weight: 700; }
.guides-page .table-wrap tr:nth-child(even) td { background: #f8fafb; }
.guides-page .table-wrap tr:last-child td { border-bottom: 0; }
.guides-page .mobile-toc { display: none; }
.guides-page .guide-diagram { margin: 24px 0; padding: 24px; border: 1px solid var(--border); border-radius: 10px; background: #f4f9f8; }
.guides-page .diagram-title { font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin-bottom: 20px; }
.guides-page .guide-diagram figcaption { margin-top: 18px; color: #526473; font-size: .82rem; line-height: 1.6; }
.guides-page .diagram-note { margin: 16px 0 0; font-size: .9rem; }
.guides-page .diagram-fraction { display: grid; max-width: 520px; margin: 0 auto; text-align: center; font-weight: 600; }
.guides-page .diagram-fraction span { padding: 12px 4px; }
.guides-page .diagram-fraction span:first-child { border-bottom: 2px solid #527773; }
.guides-page .diagram-action { display: inline-block; margin-top: 18px; color: var(--accent-dk); text-decoration: underline; font-weight: 600; }
.guides-page .diagram-flow { list-style: none; padding: 0; display: flex; gap: 28px; }
.guides-page .diagram-flow li { flex: 1; position: relative; padding: 16px 12px; background: #e0eeeb; border-radius: 6px; text-align: center; }
.guides-page .diagram-flow li + li::before { content: '→'; position: absolute; left: -23px; top: 35%; font-size: 20px; color: #527773; }
.guides-page .diagram-flow strong, .guides-page .diagram-flow span, .guides-page .diagram-pair strong, .guides-page .diagram-pair span { display: block; }
.guides-page .diagram-flow span, .guides-page .diagram-pair span { margin-top: 6px; }
.guides-page .diagram-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.guides-page .diagram-pair > div { background: #e0eeeb; padding: 18px; border-radius: 6px; }
.guides-page .chemistry-family { padding: 18px; border: 1px solid #9bbdb6; border-radius: 8px; }
.guides-page .chemistry-family > strong { display: block; margin-bottom: 16px; }
.guides-page .capacity-bars { list-style: none; padding: 0; }
.guides-page .capacity-bars li { display: grid; grid-template-columns: 85px 1fr 110px; gap: 12px; align-items: center; margin: 14px 0; }
.guides-page .capacity-track { display: block; background: #dde9e6; height: 18px; border-radius: 3px; }
.guides-page .capacity-track > span { display: block; height: 100%; background: #347e74; border-radius: inherit; }
.guides-page .wave-diagram { width: 100%; max-height: 220px; }
.guides-page .guide-caution { padding: 18px 20px; background: #fff9e8; border-left: 3px solid #96711b; border-radius: 4px; }
@media (max-width: 1024px) {
 .guides-page .mobile-toc { display: block; border: 1px solid var(--border-dk); border-radius: 8px; padding: 14px 18px; }
 .guides-page .mobile-toc summary { font-weight: 600; cursor: pointer; min-height: 28px; }
 .guides-page .mobile-toc .toc-list { margin-top: 14px; }
 .guides-page .mobile-toc .toc-list a { padding: 10px 4px; font-size: .9rem; }
 .guides-page .content-sidebar > .sidebar-box:first-child { display: none; }
}
@media (max-width: 768px) {
 .guides-page .burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
 .guides-page .site-nav[data-open='true'] { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 16px 24px; background: white; border-bottom: 1px solid var(--border); max-height: calc(100dvh - 61px); overflow-y: auto; }
 .guides-page .site-nav[data-open='true'] .nav-link { padding: 12px 0; white-space: normal; }
 .guides-page .site-nav[data-open='true'] .dropdown { position: static; display: block; visibility: visible; opacity: 1; transform: none; min-width: 0; box-shadow: none; border: 0; border-left: 2px solid var(--border); border-radius: 0; margin: 0 0 12px 8px; }
 .guides-page .site-nav[data-open='true'] .dropdown a { padding: 10px 14px; }
 .guides-page .content-layout { padding-top: 28px; gap: 24px; }
 .guides-page .content-main h2, .guides-page .content-main h3 { scroll-margin-top: 80px; }
 .guides-page .guide-diagram { padding: 18px; }
 .guides-page .diagram-flow { flex-direction: column; gap: 28px; }
 .guides-page .diagram-flow li + li::before { content: '↓'; top: -29px; left: calc(50% - 7px); }
 .guides-page .diagram-pair { grid-template-columns: 1fr; gap: 12px; }
 .guides-page .chemistry-family { padding: 12px; }
 .guides-page .capacity-bars li { grid-template-columns: 1fr auto; gap: 6px 12px; }
 .guides-page .capacity-track { grid-column: 1 / -1; grid-row: 2; }
 .guides-page .capacity-bars li > span:last-child { grid-column: 2; grid-row: 1; }
 .guides-page .table-wrap { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .guides-page { scroll-behavior: auto; } .guides-page * { transition: none !important; } }