/* ═══════════════════════════════════════════════════════════════ DRUGZ — Feuille de style des pages OUTILS Source unique pour : anatomie-moléculaire, comparateur-drogues, index des effets (SEI) et pages d'effets individuelles. Chaque page porte une classe sur (tool-*) qui scope ses règles. Éditable à la main. ═══════════════════════════════════════════════════════════════ */ /* ── Keyframes partagées ── */ @keyframes dz-pulse{0%,100%{opacity:0.4;} 50%{opacity:1;}} @keyframes dz-sweep{0%{transform:translateY(-100%);} 100%{transform:translateY(100vh);}} @keyframes fade-slide-in{from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }} @keyframes mvfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes mvspin{to{transform:rotate(360deg)}} @keyframes pulse-dot{0%, 100% { opacity: 0.4; } 50% { opacity: 1; }} @keyframes scanline-sweep{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}} /* ── Couleur d'accent par catégorie d'effet (--acc) ── */ body.cat-visual { --acc: #00f0ff; } body.cat-auditory { --acc: #ff00e5; } body.cat-tactile { --acc: #ffaa00; } body.cat-disconnective { --acc: #8b5cf6; } body.cat-smell-taste { --acc: #10b981; } body.cat-multisensory { --acc: #f43f5e; } body.cat-cognitive { --acc: #06b6d4; } body.cat-physical { --acc: #84cc16; } body.cat-physical-uncomfortable { --acc: #ef4444; } body.cat-clinical { --acc: #f97316; } /* ═══════════════════════════════════════════════════════════════ ANATOMIE MOLÉCULAIRE (body.tool-anatomie) ═══════════════════════════════════════════════════════════════ */ body.tool-anatomie {--bg:#04040a; --bg-card:#07070f; --bg-card2:#0a0a14; --bg-card3:#0d0d1b; --text-hi:rgba(255,255,255,0.96); --text-mid:rgba(255,255,255,0.82); --text-lo:rgba(255,255,255,0.58); --border:rgba(255,255,255,0.06); --border-hi:rgba(255,255,255,0.10); --accent:#00ffff; --accent-60:rgba(0,255,255,0.60); --accent-30:rgba(0,255,255,0.30); --accent-12:rgba(0,255,255,0.12); --accent-08:rgba(0,255,255,0.08); --warn:#D2C55F; --err:#D74B4B; --ok:#76d67c; --atom-c:var(--text-mid);} body.tool-anatomie * {box-sizing:border-box} body.tool-anatomie {scroll-behavior:smooth} body.tool-anatomie {margin:0;color:var(--text-mid);font-family:"Exo 2",system-ui,sans-serif;line-height:1.56;-webkit-font-smoothing:antialiased} body.tool-anatomie a {color:inherit} body.tool-anatomie .dz-am-header {position:relative;z-index:10;padding:48px 24px 32px;text-align:center;border-bottom:1px solid var(--border)} body.tool-anatomie .dz-am-header__logo {font-family:"Orbitron",sans-serif;font-size:11px;font-weight:800;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:20px} body.tool-anatomie .dz-am-header__title {font-family:"Orbitron",sans-serif;font-size:clamp(22px,5vw,34px);font-weight:900;letter-spacing:.08em;line-height:1.2;margin:0 0 8px;color:white;-webkit-text-fill-color:white} body.tool-anatomie .dz-am-header__title::before, body.tool-anatomie .dz-am-header__title::after {content:none!important;display:none!important} body.tool-anatomie .dz-am-header__title .t-glitch {text-shadow:.02em 0 #ff00e5,-.02em 0 #00f0ff} body.tool-anatomie .dz-am-header__title .t-grad {background:linear-gradient(135deg,#00f0ff,#ff00e5,#ffaa00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} body.tool-anatomie .dz-am-header__desc {font-family:"Share Tech Mono",monospace;font-size:11px;color:rgba(255,255,255,.35);max-width:540px;margin:14px auto 0;line-height:1.7;letter-spacing:.02em} body.tool-anatomie .dz-am-nav {display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:20px auto 0} body.tool-anatomie .dz-am-nav a {font-family:"Share Tech Mono",monospace;text-decoration:none;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.1);padding:6px 14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:.15s;background:transparent} body.tool-anatomie .dz-am-nav a:hover {color:var(--accent);border-color:var(--accent-30)} body.tool-anatomie .am-content {max-width:1040px;margin:0 auto;padding:24px 20px 80px;position:relative;z-index:1} body.tool-anatomie .dz-scanline {position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.25),transparent);animation:scanline-sweep 8s linear infinite;pointer-events:none;z-index:998} body.tool-anatomie .am-toast {position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);background:var(--bg-card3);border:1px solid var(--accent-30);color:var(--accent);font-family:"Share Tech Mono",monospace;font-size:11px;letter-spacing:.04em;padding:10px 16px;box-shadow:0 8px 28px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9500} body.tool-anatomie .am-toast.show {opacity:1;transform:translateX(-50%) translateY(0)} body.tool-anatomie .guard {border:1px solid rgba(255,255,255,.08);border-left:2px solid var(--accent-30);background:rgba(255,255,255,.02);padding:14px 18px;margin:0 0 22px} body.tool-anatomie .guard strong {color:var(--accent);font-family:"Share Tech Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:5px} body.tool-anatomie .guard p {margin:0;color:rgba(255,255,255,.35);font-family:"Share Tech Mono",monospace;font-size:11px;line-height:1.7;letter-spacing:.02em} body.tool-anatomie .section-title {display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:38px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border)} body.tool-anatomie .section-title h2 {font-family:"Orbitron",sans-serif;font-size:.88rem;color:var(--text-hi);margin:0;letter-spacing:.18em;text-transform:uppercase} body.tool-anatomie .section-title p {margin:0;color:var(--text-lo);font-family:"Share Tech Mono",monospace;font-size:.72rem;letter-spacing:.03em;max-width:54ch} body.tool-anatomie .card {background:var(--bg-card);border:1px solid var(--border-hi)} body.tool-anatomie .mv-input {padding:18px;position:relative;margin-bottom:22px} body.tool-anatomie .mv-input::before {content:"mol://input";position:absolute;top:10px;right:14px;font-family:"Share Tech Mono",monospace;font-size:.62rem;letter-spacing:.15em;color:var(--text-lo);opacity:.55} body.tool-anatomie .mv-pills {display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px} body.tool-anatomie .mv-pill, body.tool-anatomie .chip {font-family:"Share Tech Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;cursor:pointer;user-select:none;background:transparent;border:1px solid var(--border);color:var(--text-lo);transition:.15s} body.tool-anatomie .mv-pill:hover, body.tool-anatomie .chip:hover {border-color:var(--border-hi);color:var(--text-mid)} body.tool-anatomie .mv-pill[aria-pressed="true"], body.tool-anatomie .chip.is-active {background:var(--accent-08);border-color:var(--accent-30);color:var(--accent)} body.tool-anatomie .mv-row {display:flex;gap:8px;flex-wrap:wrap} body.tool-anatomie .mv-row input, body.tool-anatomie textarea {flex:1 1 220px;min-width:0;background:rgba(255,255,255,.02);border:1px solid var(--border-hi);color:var(--text-hi);font-family:"Share Tech Mono",monospace;font-size:.95rem;padding:11px 13px;transition:.15s;outline:none} body.tool-anatomie .mv-row input::placeholder, body.tool-anatomie textarea::placeholder {color:var(--text-lo)} body.tool-anatomie .mv-row input:focus, body.tool-anatomie textarea:focus {border-color:var(--accent-30);box-shadow:0 0 0 1px var(--accent-30)} body.tool-anatomie .mv-btn {background:transparent;border:1px solid var(--accent-30);color:var(--accent);font-family:"Share Tech Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:0 20px;cursor:pointer;transition:.15s;white-space:nowrap;min-height:44px} body.tool-anatomie .mv-btn:hover:not(:disabled) {background:var(--accent-08);border-color:var(--accent-60)} body.tool-anatomie .mv-btn:disabled {opacity:.45;cursor:wait} body.tool-anatomie .mv-btn:focus-visible, body.tool-anatomie .mv-pill:focus-visible, body.tool-anatomie .chip:focus-visible, body.tool-anatomie .mv-tab:focus-visible, body.tool-anatomie .leg-chip:focus-visible, body.tool-anatomie .am-filter button:focus-visible, body.tool-anatomie .mv-stybtn:focus-visible {outline:2px solid var(--accent);outline-offset:2px} body.tool-anatomie .mv-ex {margin-top:12px;font-size:11px;color:var(--text-lo)} body.tool-anatomie .mv-ex span {font-family:"Share Tech Mono",monospace;letter-spacing:.1em;margin-right:6px;opacity:.6} body.tool-anatomie .mv-ex button {background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-family:"Share Tech Mono",monospace;font-size:11px;padding:2px 4px;text-decoration:underline;text-decoration-color:var(--border-hi);text-underline-offset:3px;transition:.12s} body.tool-anatomie .mv-ex button:hover {color:var(--accent);text-decoration-color:var(--accent-30)} body.tool-anatomie .mv-status {display:none;margin-top:13px;padding:10px 13px;font-size:.86rem;font-family:"Share Tech Mono",monospace;letter-spacing:.02em} body.tool-anatomie .mv-status.show {display:flex;align-items:center;gap:9px} body.tool-anatomie .mv-status.is-loading {background:var(--accent-08);border:1px solid var(--accent-30);color:var(--accent)} body.tool-anatomie .mv-status.is-warn {background:rgba(210,197,95,.08);border:1px solid rgba(210,197,95,.3);color:var(--warn)} body.tool-anatomie .mv-status.is-err {background:rgba(215,75,75,.08);border:1px solid rgba(215,75,75,.35);color:var(--err)} body.tool-anatomie .mv-spin {width:13px;height:13px;border:2px solid var(--accent-30);border-top-color:var(--accent);border-radius:50%;animation:mvspin .7s linear infinite;flex-shrink:0} body.tool-anatomie .mv-result {display:none;animation:mvfade .35s ease} body.tool-anatomie .mv-result.show {display:block} body.tool-anatomie .mv-idcard {border:1px solid var(--border-hi);background:var(--bg-card);padding:15px 18px;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px} body.tool-anatomie .mv-idcard .cid {font-family:"Share Tech Mono",monospace;font-size:.72rem;letter-spacing:.12em;color:var(--accent-60);text-transform:uppercase;flex-basis:100%} body.tool-anatomie .mv-idcard h2 {font-family:"Orbitron",sans-serif;font-weight:700;font-size:1rem;color:var(--text-hi);margin:2px 0 0;line-height:1.35;word-break:break-word;letter-spacing:.04em;-webkit-text-fill-color:var(--text-hi)} body.tool-anatomie .mv-idcard h2::before, body.tool-anatomie .mv-idcard h2::after {content:none!important;display:none!important} body.tool-anatomie .mv-idcard .formula {font-family:"Share Tech Mono",monospace;font-size:1rem;color:var(--accent)} body.tool-anatomie .mv-idcard__actions {flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px;margin-top:10px} body.tool-anatomie .mv-iconbtn {display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border-hi);color:var(--text-lo);font-family:"Share Tech Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;cursor:pointer;transition:.14s} body.tool-anatomie .mv-iconbtn:hover {border-color:var(--accent-30);color:var(--accent)} body.tool-anatomie .mv-iconbtn:focus-visible {outline:2px solid var(--accent);outline-offset:2px} body.tool-anatomie .mv-iconbtn.is-ok {border-color:var(--ok);color:var(--ok)} body.tool-anatomie .mv-iconbtn svg {width:13px;height:13px;flex-shrink:0} body.tool-anatomie .atelier {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:14px;align-items:start} body.tool-anatomie .viewer {overflow:hidden} body.tool-anatomie .mv-tabs {display:flex;border-bottom:1px solid var(--border)} body.tool-anatomie .mv-tab {flex:1;background:none;border:none;cursor:pointer;padding:11px;font-family:"Share Tech Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-lo);border-bottom:2px solid transparent;transition:.15s} body.tool-anatomie .mv-tab:hover {color:var(--text-mid)} body.tool-anatomie .mv-tab[aria-selected="true"] {color:var(--accent);border-bottom-color:var(--accent)} body.tool-anatomie .mv-panel {display:none;position:relative} body.tool-anatomie .mv-panel.show {display:block} body.tool-anatomie .am-filter {display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;background:var(--bg-card)} body.tool-anatomie .am-filter .lbl {font-family:"Share Tech Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-lo);margin-right:2px} body.tool-anatomie .am-filter button {background:transparent;border:1px solid var(--border);color:var(--text-lo);font-family:"Share Tech Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;cursor:pointer;transition:.13s} body.tool-anatomie .am-filter button:hover {border-color:var(--border-hi);color:var(--text-mid)} body.tool-anatomie .am-filter button[aria-pressed="true"] {background:var(--accent-08);border-color:var(--accent-30);color:var(--accent)} body.tool-anatomie #mv-2d {display:flex;align-items:center;justify-content:center;min-height:330px;padding:22px;color:var(--atom-c);background:var(--bg-card2)} body.tool-anatomie #mv-2d svg, body.tool-anatomie .mini-mol svg {max-width:100%;height:auto;max-height:360px;display:block} body.tool-anatomie .mv-msg {color:var(--text-lo);font-family:"Share Tech Mono",monospace;font-size:.8rem;text-align:center} body.tool-anatomie .mv-2d-note {position:absolute;bottom:8px;right:12px;font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.12em;color:var(--text-lo);opacity:.5;pointer-events:none} body.tool-anatomie .mv-3d-bar {display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;background:var(--bg-card)} body.tool-anatomie .mv-3d-bar .lbl {font-family:"Share Tech Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-lo);margin-right:2px} body.tool-anatomie .mv-stybtn {background:transparent;border:1px solid var(--border);color:var(--text-lo);font-family:"Share Tech Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;cursor:pointer;transition:.13s} body.tool-anatomie .mv-stybtn:hover {border-color:var(--border-hi);color:var(--text-mid)} body.tool-anatomie .mv-stybtn[aria-pressed="true"] {background:var(--accent-08);border-color:var(--accent-30);color:var(--accent)} body.tool-anatomie #mv-3d {width:100%;height:360px;position:relative;background:var(--bg-card2)} body.tool-anatomie #mv-3d canvas {outline:none} body.tool-anatomie .mv-3d-hint {position:absolute;bottom:8px;left:12px;font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.1em;color:var(--text-lo);opacity:.5;pointer-events:none} body.tool-anatomie .mv-no3d {display:flex;align-items:center;justify-content:center;height:360px;text-align:center;padding:24px;color:var(--text-lo);font-family:"Share Tech Mono",monospace;font-size:.85rem} body.tool-anatomie .anatomy-panel {padding:16px 16px 18px;display:flex;flex-direction:column;min-height:330px} body.tool-anatomie .anatomy-panel h3 {margin:0 0 4px;color:var(--text-hi);font-size:.82rem;font-family:"Orbitron",sans-serif;letter-spacing:.14em;text-transform:uppercase} body.tool-anatomie .ap-kicker {font-family:"Share Tech Mono",monospace;color:var(--accent-60);text-transform:uppercase;letter-spacing:.18em;font-size:.6rem;margin-bottom:7px} body.tool-anatomie .ap-overview {font-size:.9rem;color:var(--text-lo);margin:0 0 12px} body.tool-anatomie .ap-stats {display:flex;flex-wrap:wrap;gap:4px;margin:0 0 13px} body.tool-anatomie .ap-stat {font-family:"Share Tech Mono",monospace;font-size:.66rem;letter-spacing:.04em;color:var(--text-mid);background:var(--bg-card2);border:1px solid var(--border);padding:4px 9px} body.tool-anatomie .ap-stat b {color:var(--accent);font-weight:400} body.tool-anatomie .leg-title {font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-lo);margin:4px 0 8px} body.tool-anatomie .legend {display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px} body.tool-anatomie .leg-chip {display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.02);border:1px solid var(--border);color:var(--text-mid);padding:5px 9px 5px 7px;cursor:pointer;transition:.13s;font-size:.82rem;text-align:left} body.tool-anatomie .leg-chip:hover {border-color:var(--border-hi)} body.tool-anatomie .leg-chip.is-active {border-color:var(--leg-color,var(--accent-30));background:color-mix(in srgb,var(--leg-color,var(--accent)) 12%,transparent)} body.tool-anatomie .leg-dot {width:10px;height:10px;background:var(--leg-color,#888);flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset} body.tool-anatomie .leg-chip .lg-name {color:var(--text-hi)} body.tool-anatomie .leg-chip .lg-count {font-family:"Share Tech Mono",monospace;font-size:.7rem;color:var(--text-lo);margin-left:1px} body.tool-anatomie .ap-hint {font-size:.8rem;color:var(--text-lo);margin:8px 0 0;font-style:italic} body.tool-anatomie .ap-detail {border-top:1px solid var(--border);margin-top:14px;padding-top:14px;animation:mvfade .25s ease} body.tool-anatomie .ap-back {background:none;border:none;color:var(--accent);cursor:pointer;font-family:"Share Tech Mono",monospace;font-size:.74rem;letter-spacing:.04em;padding:0 0 8px;display:inline-flex;align-items:center;gap:5px} body.tool-anatomie .ap-back:hover {text-decoration:underline} body.tool-anatomie .ap-d-head {display:flex;align-items:center;gap:9px;margin:2px 0 4px} body.tool-anatomie .ap-d-dot {width:14px;height:14px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 10px -1px var(--leg-color)} body.tool-anatomie .ap-d-head h4 {margin:0;font-size:.9rem;color:var(--text-hi);font-family:"Orbitron",sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase} body.tool-anatomie .ap-d-tag {font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-lo);border:1px solid var(--border);padding:2px 8px} body.tool-anatomie .ap-d-short {color:var(--text-mid);font-size:.9rem;margin:6px 0 8px} body.tool-anatomie .ap-d-body {color:var(--text-lo);font-size:.88rem;margin:0 0 10px} body.tool-anatomie .ap-d-sub {font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-lo);margin:10px 0 6px} body.tool-anatomie .badge-row {display:flex;flex-wrap:wrap;gap:4px} body.tool-anatomie .badge {font-family:"Share Tech Mono",monospace;color:var(--text-lo);border:1px solid var(--border);background:var(--bg-card2);padding:3px 8px;font-size:.68rem;letter-spacing:.04em} body.tool-anatomie .limit-note {margin-top:12px;border:1px solid rgba(210,197,95,.22);border-left:2px solid rgba(210,197,95,.5);background:rgba(210,197,95,.04);padding:10px 11px;color:var(--warn);font-size:.84rem} body.tool-anatomie .limit-note b {font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:3px} body.tool-anatomie .note-drugz {margin:0 0 12px;border:1px solid var(--accent-30);border-left:2px solid var(--accent);background:var(--accent-08);padding:10px 11px;color:var(--text-mid);font-size:.86rem} body.tool-anatomie .note-drugz b {font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:3px;color:var(--accent)} body.tool-anatomie .pharma-card {border:1px solid var(--border-hi);background:var(--bg-card);padding:16px 18px 18px;margin-top:14px} body.tool-anatomie .pharma-card__title {font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-lo);margin:0 0 14px} body.tool-anatomie .pharma-card__stack {display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);overflow:hidden} body.tool-anatomie .pharma-card__cell {background:var(--bg-card2);padding:11px 13px;display:flex;flex-direction:column;gap:3px} body.tool-anatomie .pharma-card__cell--wide {grid-column:span 2} body.tool-anatomie .pharma-card__cell .k {font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-lo)} body.tool-anatomie .pharma-card__cell .v {font-family:"Share Tech Mono",monospace;font-size:1rem;color:var(--text-hi)} body.tool-anatomie .pharma-card__cell .v .unit {font-size:.7em;color:var(--text-lo);margin-left:3px} body.tool-anatomie .pharma-card__links {display:flex;gap:6px;margin-top:14px;flex-wrap:wrap} body.tool-anatomie .pharma-card__btn {display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:"Share Tech Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;color:var(--text-mid);background:transparent;border:1px solid var(--border-hi);transition:.15s} body.tool-anatomie .pharma-card__btn:hover {border-color:var(--accent-30);color:var(--accent)} body.tool-anatomie .compare {padding:16px} body.tool-anatomie .compare-controls {display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:stretch;margin:12px 0 8px} body.tool-anatomie .compare-controls input {background:rgba(255,255,255,.02);border:1px solid var(--border-hi);color:var(--text-hi);font-family:"Share Tech Mono",monospace;font-size:.92rem;padding:11px 13px;min-width:0;outline:none;transition:.15s} body.tool-anatomie .compare-controls input:focus {border-color:var(--accent-30);box-shadow:0 0 0 1px var(--accent-30)} body.tool-anatomie .cmp-hint {font-size:11px;font-family:"Share Tech Mono",monospace;color:var(--text-lo);margin:0 0 10px;letter-spacing:.02em} body.tool-anatomie .compare-output {display:grid;grid-template-columns:1fr 1fr;gap:14px} body.tool-anatomie .compare-card {background:var(--bg-card2);border:1px solid var(--border);border-top:2px solid var(--accent-30);padding:13px} body.tool-anatomie .compare-card h3 {margin:0 0 2px;color:var(--text-hi);font-size:.82rem;font-family:"Orbitron",sans-serif;letter-spacing:.12em;text-transform:uppercase} body.tool-anatomie .compare-card .fam {margin:0;color:var(--text-lo);font-size:.82rem;font-family:"Share Tech Mono",monospace} body.tool-anatomie .mini-mol {min-height:180px;display:flex;align-items:center;justify-content:center;color:var(--text-mid);background:var(--bg-card3);border:1px solid var(--border);margin:10px 0;padding:10px} body.tool-anatomie .diff-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} body.tool-anatomie .diff-col {background:var(--bg-card2);border:1px solid var(--border);padding:12px} body.tool-anatomie .diff-col h4 {font-family:"Share Tech Mono",monospace;color:var(--accent);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px} body.tool-anatomie .diff-col ul {margin:0;padding-left:0;list-style:none;color:var(--text-lo);font-size:.86rem} body.tool-anatomie .diff-col li {display:flex;align-items:center;gap:7px;padding:2px 0} body.tool-anatomie .diff-col .dd {width:9px;height:9px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset} body.tool-anatomie .learning-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:10px} body.tool-anatomie .course {padding:15px} body.tool-anatomie .course .kicker {font-family:"Share Tech Mono",monospace;color:var(--accent-60);text-transform:uppercase;letter-spacing:.18em;font-size:.6rem;margin-bottom:6px} body.tool-anatomie .course h3 {margin:0 0 7px;color:var(--text-hi);font-size:.82rem;font-family:"Orbitron",sans-serif;letter-spacing:.12em;text-transform:uppercase} body.tool-anatomie .course p {margin:0;color:var(--text-lo);font-size:.88rem} body.tool-anatomie .course details {border-top:1px solid var(--border);margin-top:10px;padding-top:10px} body.tool-anatomie .course summary {cursor:pointer;color:var(--accent);font-family:"Share Tech Mono",monospace;font-size:.76rem;letter-spacing:.05em} body.tool-anatomie .course ul {margin:9px 0 0;padding-left:18px;color:var(--text-lo);font-size:.88rem} body.tool-anatomie .glossary-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:8px} body.tool-anatomie .glossary-card {padding:13px;background:var(--bg-card);border:1px solid var(--border-hi)} body.tool-anatomie .glossary-card .gc-head {display:flex;align-items:center;gap:8px;margin-bottom:5px} body.tool-anatomie .glossary-card .gc-dot {width:10px;height:10px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset} body.tool-anatomie .glossary-card strong {color:var(--text-hi)} body.tool-anatomie .glossary-card span {display:block;color:var(--accent);font-family:"Share Tech Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px} body.tool-anatomie .glossary-card p {margin:0;color:var(--text-lo);font-size:.84rem} body.tool-anatomie .footer-note {margin-top:32px;color:var(--text-lo);font-size:.84rem;border-top:1px solid var(--border);padding-top:18px;font-family:"Share Tech Mono",monospace;letter-spacing:.02em;line-height:1.8} body.tool-anatomie .footer-note strong {color:var(--text-mid)} @media(max-width:820px) {.atelier{grid-template-columns:1fr}.compare-output{grid-template-columns:1fr}.learning-grid{grid-template-columns:1fr}.diff-grid{grid-template-columns:1fr}.glossary-grid{grid-template-columns:1fr 1fr}.pharma-card__stack{grid-template-columns:repeat(2,1fr)}.compare-controls{grid-template-columns:1fr}} @media(max-width:480px) {.glossary-grid{grid-template-columns:1fr}.mv-tabs{overflow-x:auto}.section-title{display:block}.section-title p{margin-top:6px}.dz-am-header{padding:32px 16px 24px}.am-content{padding:16px 12px 60px}} @media(prefers-reduced-motion:reduce) {*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}} /* ═══════════════════════════════════════════════════════════════ COMPARATEUR DE DROGUES (body.tool-comparateur) ═══════════════════════════════════════════════════════════════ */ body.tool-comparateur {--mol-line: rgba(255, 255, 255, 0.72); --mol-atom: rgba(255, 255, 255, 0.92); --accent-r: 0; --accent-g: 255; --accent-b: 255;} body.tool-comparateur .mol-svg {width:100%; height:100%; color:rgba(255,255,255,0.8);} body.tool-comparateur .preview-meta {margin: 28px 0 40px; padding: 18px 22px; background: var(--bg-card); border: 1px solid var(--border); border-left: 2px solid var(--accent-60); font-family: 'Exo 2', sans-serif; font-size: 13px; line-height: 1.7; color: var(--text-mid);} body.tool-comparateur .preview-meta strong {color: var(--text-hi); font-weight: 600;} body.tool-comparateur .preview-meta code {font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--accent-85);} body.tool-comparateur .cmp-picker {background: var(--bg-card2); border: 1px solid var(--border); margin-bottom: 32px;} body.tool-comparateur .cmp-picker__slots {display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border);} body.tool-comparateur .cmp-picker__slots[data-empty="true"] {display: none;} body.tool-comparateur .cmp-picker__label {font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-lo); margin-right: 4px;} body.tool-comparateur .cmp-picker__counter {margin-left: auto; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--text-lo);} body.tool-comparateur .cmp-chip {display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--chip-color, var(--accent)); background: rgba(var(--chip-r,var(--accent-r)), var(--chip-g,var(--accent-g)), var(--chip-b,var(--accent-b)), 0.10); font-family: 'Exo 2', sans-serif; font-size: 12px; letter-spacing: 0.02em; color: var(--text-hi);} body.tool-comparateur .cmp-chip__dot {width: 8px; height: 8px; background: var(--chip-color, var(--accent)); flex-shrink: 0;} body.tool-comparateur .cmp-chip__name {margin-right: 2px;} body.tool-comparateur .cmp-chip__remove {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: transparent; border: 0; border-left: 1px solid var(--border); color: var(--text-lo); cursor: pointer; padding: 0; font-family: 'Share Tech Mono', monospace; font-size: 14px; line-height: 1; transition: color 0.15s, background 0.15s;} body.tool-comparateur .cmp-chip__remove:hover {color: var(--text-hi); background: rgba(255,255,255,0.04);} body.tool-comparateur .cmp-picker__search {position: relative; padding: 10px 14px;} body.tool-comparateur .cmp-picker__search-inner {display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); padding: 0 12px; transition: border-color 0.2s;} body.tool-comparateur .cmp-picker__search-inner:focus-within {border-color: var(--accent-60);} body.tool-comparateur .cmp-picker__search-inner[data-disabled="true"] {opacity: 0.5; pointer-events: none;} body.tool-comparateur .cmp-picker__search-icon {width: 14px; height: 14px; color: var(--text-lo); flex-shrink: 0;} body.tool-comparateur .cmp-picker__input {flex: 1; background: transparent; border: 0; outline: none; padding: 10px 0; font-family: 'Exo 2', sans-serif; font-size: 13px; color: var(--text-hi); letter-spacing: 0.01em;} body.tool-comparateur .cmp-picker__input::placeholder {color: var(--text-lo);} body.tool-comparateur .cmp-picker__hint {font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-lo); flex-shrink: 0;} body.tool-comparateur .cmp-picker__dropdown {position: absolute; left: 14px; right: 14px; top: calc(100% - 10px); background: var(--bg-card); border: 1px solid var(--border-hi); z-index: 10; max-height: 280px; overflow-y: auto; display: none; box-shadow: 0 12px 32px rgba(0,0,0,0.4);} body.tool-comparateur .cmp-picker__dropdown[data-open="true"] {display: block;} body.tool-comparateur .cmp-picker__result {display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; font-family: 'Exo 2', sans-serif; color: var(--text-mid); transition: background 0.15s, color 0.15s;} body.tool-comparateur .cmp-picker__result:last-child {border-bottom: 0;} body.tool-comparateur .cmp-picker__result:hover, body.tool-comparateur .cmp-picker__result[data-active="true"] {background: rgba(var(--res-r,var(--accent-r)), var(--res-g,var(--accent-g)), var(--res-b,var(--accent-b)), 0.08); color: var(--text-hi);} body.tool-comparateur .cmp-picker__result[data-disabled="true"] {opacity: 0.4; cursor: not-allowed;} body.tool-comparateur .cmp-picker__result-dot {width: 8px; height: 8px; background: var(--res-color, var(--accent)); flex-shrink: 0;} body.tool-comparateur .cmp-picker__result-name {font-size: 13px; flex: 1;} body.tool-comparateur .cmp-picker__result-cat {font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--res-color, var(--accent)); opacity: 0.75;} body.tool-comparateur .cmp-picker__no-result {padding: 14px; font-family: 'Share Tech Mono', monospace; font-size: 11px; text-align: center; color: var(--text-lo); letter-spacing: 0.08em;} body.tool-comparateur .cmp-dual {display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 32px;} @media (max-width: 720px) { body.tool-comparateur .cmp-dual {grid-template-columns: 1fr;} } body.tool-comparateur .cmp-card {background: var(--bg-card); border: 1px solid var(--border); border-top: 2px solid var(--sub-color, var(--accent)); display: flex; flex-direction: column;} body.tool-comparateur .cmp-card__head {padding: 20px 20px 16px; border-bottom: 1px solid var(--border); box-sizing: border-box;} body.tool-comparateur .cmp-card__mol-wrap {aspect-ratio: 5/3; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; background: rgba(var(--sub-r, var(--accent-r)), var(--sub-g, var(--accent-g)), var(--sub-b, var(--accent-b)), 0.04); border: 1px solid var(--border);} body.tool-comparateur .cmp-card__mol-wrap svg, body.tool-comparateur .cmp-card__mol-wrap img {width: 85%; height: auto; max-height: 85%; object-fit: contain;} body.tool-comparateur .cmp-card__cat-label {font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sub-color, var(--accent)); margin-bottom: 8px;} body.tool-comparateur .cmp-card__name {font-family: 'Orbitron', monospace; font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-hi); margin: 0 0 6px;} body.tool-comparateur .cmp-card__formula {font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--text-lo); margin-bottom: 14px;} body.tool-comparateur .cmp-card__roa-filter {margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--border);} body.tool-comparateur .cmp-card__roa-filter-label {font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;} body.tool-comparateur .cmp-card__roa-filter-label::before {content: ''; width: 4px; height: 4px; background: var(--sub-color, var(--accent)); opacity: 0.6;} body.tool-comparateur .cmp-card__roa-single {font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--text-mid); letter-spacing: 0.08em;} body.tool-comparateur .roa-switch {display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); background: rgba(255,255,255,0.02);} body.tool-comparateur .roa-switch__btn {font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; color: var(--text-lo); background: transparent; border: 0; cursor: pointer; transition: color 0.15s, background 0.15s;} body.tool-comparateur .roa-switch__btn:hover {color: var(--text-mid);} body.tool-comparateur .roa-switch__btn.is-on {color: var(--text-hi); background: rgba(var(--sub-r, var(--accent-r)), var(--sub-g, var(--accent-g)), var(--sub-b, var(--accent-b)), 0.18); box-shadow: inset 0 -1px 0 var(--sub-color, var(--accent));} body.tool-comparateur .cmp-card__block {padding: 16px 20px; border-bottom: 1px solid var(--border); box-sizing: border-box; display: flex; flex-direction: column;} body.tool-comparateur .cmp-card__block:last-child {border-bottom: 0;} body.tool-comparateur .cmp-card__block-label {font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;} body.tool-comparateur .cmp-card__block-label::after {content: ''; flex: 1; height: 1px; background: var(--border);} body.tool-comparateur .cmp-card__text {font-family: 'Exo 2', sans-serif; font-size: 13px; line-height: 1.65; color: var(--text-mid); margin: 0;} body.tool-comparateur .cmp-card__btn-full {display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 8px 16px; border-radius: 6px; background: rgba(var(--sub-r), var(--sub-g), var(--sub-b), 0.15); color: var(--sub-color); font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border: 1px solid rgba(var(--sub-r), var(--sub-g), var(--sub-b), 0.3); transition: all 0.2s ease; width: 100%; box-sizing: border-box;} body.tool-comparateur .cmp-card__btn-full:hover, body.tool-comparateur .cmp-card__btn-full:focus {background: rgba(var(--sub-r), var(--sub-g), var(--sub-b), 0.25); border-color: rgba(var(--sub-r), var(--sub-g), var(--sub-b), 0.6); transform: translateY(-1px);} body.tool-comparateur .cmp-card__kv-row {display: flex; justify-content: space-between; font-family: 'Share Tech Mono', monospace; font-size: 11px; padding: 4px 0; letter-spacing: 0.04em;} body.tool-comparateur .cmp-card__kv-row span:first-child {color: var(--text-lo);} body.tool-comparateur .cmp-card__kv-row span:last-child {color: var(--text-hi);} body.tool-comparateur .cmp-card__recept-row {display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 4px 0; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.04em;} body.tool-comparateur .cmp-card__recept-name {color: var(--text-mid);} body.tool-comparateur .cmp-card__recept-val {color: var(--text-hi);} body.tool-comparateur .cmp-card__recept-ratio {color: var(--text-lo); font-size: 10px; min-width: 50px; text-align: right;} body.tool-comparateur .cmp-card__recept-ratio[data-primary="true"] {color: var(--sub-color, var(--accent)); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;} body.tool-comparateur .cmp-addictivity {margin: 0;} body.tool-comparateur .cmp-addictivity__label {font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 8px;} body.tool-comparateur .cmp-addictivity__track {display: flex; gap: 4px; margin-bottom: 6px;} body.tool-comparateur .cmp-addictivity__cell {flex: 1; height: 8px; background: rgba(255,255,255,0.06);} body.tool-comparateur .cmp-addictivity__cell.is-on {background: var(--sub-color, var(--accent));} body.tool-comparateur .cmp-addictivity__value {font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--text-mid); letter-spacing: 0.08em;} body.tool-comparateur .cmp-risks {list-style: none; padding: 0; margin: 0;} body.tool-comparateur .cmp-risks li {font-family: 'Exo 2', sans-serif; font-size: 12px; line-height: 1.7; color: var(--text-mid); padding-left: 14px; position: relative;} body.tool-comparateur .cmp-risks li::before {content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--sub-color, var(--accent));} body.tool-comparateur .cmp-card--empty {border-top-color: var(--border); border-style: dashed; display: flex; align-items: center; justify-content: center; min-height: 480px; padding: 40px 20px; text-align: center;} body.tool-comparateur .cmp-card--empty__icon {width: 32px; height: 32px; margin: 0 auto 14px; opacity: 0.4;} body.tool-comparateur .cmp-card--empty__text {font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-lo); line-height: 1.8;} body.tool-comparateur .cmp-empty {padding: 60px 24px; text-align: center; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-lo); border: 1px dashed var(--border);} body.tool-comparateur .cmp-delta {margin-top: 20px; background: var(--bg-card); border: 1px solid var(--border);} body.tool-comparateur .cmp-delta__head {display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--border);} body.tool-comparateur .cmp-delta__title {font-family: 'Orbitron', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-hi);} body.tool-comparateur .cmp-delta__context {font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--text-lo); margin-left: auto;} body.tool-comparateur .cmp-delta__context span[data-a] {color: var(--sub-a-color, var(--accent));} body.tool-comparateur .cmp-delta__context span[data-b] {color: var(--sub-b-color, var(--accent));} body.tool-comparateur .cmp-delta__row {display: grid; grid-template-columns: 140px 1fr 110px 1fr; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border);} body.tool-comparateur .cmp-delta__row:last-child {border-bottom: 0;} @media (max-width: 640px) { body.tool-comparateur .cmp-delta__row {grid-template-columns: 1fr 1fr; grid-template-areas: "label label" "a delta" "b delta"; gap: 6px 12px;} body.tool-comparateur .cmp-delta__label {grid-area: label;} body.tool-comparateur .cmp-delta__a {grid-area: a;} body.tool-comparateur .cmp-delta__delta {grid-area: delta; align-self: center;} body.tool-comparateur .cmp-delta__b {grid-area: b;} } body.tool-comparateur .cmp-delta__label {font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-lo);} body.tool-comparateur .cmp-delta__a, body.tool-comparateur .cmp-delta__b {font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--text-hi);} body.tool-comparateur .cmp-delta__a {text-align: right;} body.tool-comparateur .cmp-delta__a[data-bigger="true"] {font-weight: 700;} body.tool-comparateur .cmp-delta__b[data-bigger="true"] {font-weight: 700;} body.tool-comparateur .cmp-delta__a-sub {display: inline-block; margin-left: 6px; width: 6px; height: 6px; background: var(--sub-a-color, var(--accent)); vertical-align: middle;} body.tool-comparateur .cmp-delta__b-sub {display: inline-block; margin-right: 6px; width: 6px; height: 6px; background: var(--sub-b-color, var(--accent)); vertical-align: middle;} body.tool-comparateur .cmp-delta__delta {display: flex; align-items: center; justify-content: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--text-mid); letter-spacing: 0.04em; padding: 4px 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.02);} body.tool-comparateur .cmp-delta__arrow {font-family: 'Share Tech Mono', monospace; color: var(--accent);} body.tool-comparateur .cmp-delta__arrow[data-dir="left"]::before {content: '◀';} body.tool-comparateur .cmp-delta__arrow[data-dir="right"]::before {content: '▶';} body.tool-comparateur .cmp-delta__arrow[data-dir="eq"]::before {content: '=';} body.tool-comparateur .cmp-delta__delta[data-null="true"] {color: var(--text-lo); font-style: italic;} body.tool-comparateur .dz-scanline {position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.25), transparent); animation: scanline-sweep 8s linear infinite; pointer-events: none; z-index: 998;} body.tool-comparateur .dz-cmp-header {position: relative; z-index: 10; padding: 48px 24px 24px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.06);} body.tool-comparateur .dz-cmp-header__title {font-family: 'Orbitron', sans-serif; font-size: clamp(22px, 5vw, 34px); font-weight: 900; letter-spacing: 0.08em; line-height: 1.2; margin-bottom: 8px; color: white;} body.tool-comparateur .dz-cmp-header__title span:first-child {text-shadow: 0.02em 0 #ff00e5, -0.02em 0 #00f0ff;} body.tool-comparateur .dz-cmp-header__title span:last-child {background: linear-gradient(135deg, #00f0ff, #ff00e5, #ffaa00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;} body.tool-comparateur .dz-cmp-header__desc {font-family: 'Share Tech Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.35); max-width: 600px; margin: 14px auto 0; line-height: 1.65; letter-spacing: 0.02em;} body.tool-comparateur .dz-cmp-content {position: relative; z-index: 10; max-width: 920px; margin: 0 auto; padding: 24px 20px 80px;} @media (max-width: 480px) { body.tool-comparateur .dz-cmp-header {padding: 32px 16px 20px;} body.tool-comparateur .dz-cmp-content {padding: 16px 12px 60px;} body.tool-comparateur .dz-cmp-header__title {font-size: 22px;} } /* ═══════════════════════════════════════════════════════════════ INDEX DES EFFETS (SEI) (body.tool-sei) ═══════════════════════════════════════════════════════════════ */ body.tool-sei *, body.tool-sei *::before, body.tool-sei *::after {margin: 0; padding: 0; box-sizing: border-box;} body.tool-sei {--dz-bg: #04040a; --dz-surface: #07070f; --dz-border: rgba(255,255,255,0.06); --dz-text: rgba(255,255,255,0.65); --dz-text-dim: rgba(255,255,255,0.25); --dz-text-bright: rgba(255,255,255,0.85); --cat-visual: #00f0ff; --cat-auditory: #ff00e5; --cat-tactile: #ffaa00; --cat-disconnective: #8b5cf6; --cat-smell-taste: #10b981; --cat-multisensory: #f43f5e; --cat-cognitive: #06b6d4; --cat-physical: #84cc16; --cat-physical-uncomfortable: #ef4444; --cat-clinical: #f97316;} body.tool-sei {scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;} body.tool-sei {background: var(--dz-bg); color: var(--dz-text); font-family: 'Share Tech Mono', monospace; cursor: crosshair; min-height: 100vh;} body.tool-sei .dz-scanline {position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.25), transparent); animation: scanline-sweep 8s linear infinite; pointer-events: none; z-index: 998;} body.tool-sei .dz-sei-header {position: relative; z-index: 10; padding: 48px 24px 24px; text-align: center; border-bottom: 1px solid var(--dz-border);} body.tool-sei .dz-sei-header__logo {font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.4em; color: rgba(255,255,255,0.25); margin-bottom: 24px;} body.tool-sei .dz-sei-header__title {font-family: 'Orbitron', sans-serif; font-size: clamp(22px, 5vw, 34px); font-weight: 900; letter-spacing: 0.08em; line-height: 1.2; margin-bottom: 8px; color: white;} body.tool-sei .dz-sei-header__title span:first-child {text-shadow: 0.02em 0 #ff00e5, -0.02em 0 #00f0ff;} body.tool-sei .dz-sei-header__title span:last-child {background: linear-gradient(135deg, #00f0ff, #ff00e5, #ffaa00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;} body.tool-sei .dz-sei-header__desc {font-size: 11px; color: rgba(255,255,255,0.35); max-width: 520px; margin: 14px auto 0; line-height: 1.65; letter-spacing: 0.02em;} body.tool-sei .dz-sei-header__stats {display: flex; justify-content: center; gap: 24px; margin-top: 18px; font-size: 10px;} body.tool-sei .dz-sei-header__stats .stat-effects {color: var(--cat-visual);} body.tool-sei .dz-sei-header__stats .stat-effects::before {content: '●'; margin-right: 5px; animation: pulse-dot 2s infinite; display: inline-block;} body.tool-sei .dz-sei-header__stats .stat-cats {color: var(--cat-auditory);} body.tool-sei .dz-sei-toolbar {position: sticky; top: 0; z-index: 40; padding: 12px 20px; background: rgba(4,4,10,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--dz-border); transition: background 0.3s;} body.tool-sei .dz-sei-toolbar.scrolled {background: rgba(4,4,10,0.96);} body.tool-sei .dz-sei-search-wrap {position: relative; max-width: 600px; margin: 0 auto;} body.tool-sei .dz-sei-search-wrap::before {content: '⌕'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dz-text-dim); font-size: 14px; pointer-events: none;} body.tool-sei .dz-sei-search {width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 10px 14px 10px 36px; font-family: 'Share Tech Mono', monospace; font-size: 12px; border-radius: 2px; outline: none; transition: all 0.3s;} body.tool-sei .dz-sei-search:focus {border-color: rgba(0,240,255,0.4); box-shadow: 0 0 20px rgba(0,240,255,0.08);} body.tool-sei .dz-sei-search::placeholder {color: var(--dz-text-dim);} body.tool-sei .dz-sei-filters {display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; max-width: 600px; margin-left: auto; margin-right: auto;} body.tool-sei .dz-sei-filter-chip {border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(255,255,255,0.5); padding: 5px 10px; border-radius: 1px; font-family: 'Share Tech Mono', monospace; font-size: 10px; cursor: pointer; transition: all 0.2s; letter-spacing: 0.05em; white-space: nowrap;} body.tool-sei .dz-sei-filter-chip:hover {border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8);} body.tool-sei .dz-sei-filter-chip.active {background: rgba(255,255,255,0.08); color: white;} body.tool-sei .dz-sei-content {position: relative; z-index: 10; max-width: 660px; margin: 0 auto; padding: 24px 20px 80px;} body.tool-sei .dz-sei-category {margin-bottom: 36px;} body.tool-sei .dz-sei-category__header {cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 16px; user-select: none;} body.tool-sei .dz-sei-category__icon {width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;} body.tool-sei .dz-sei-category__icon svg {width: 100%; height: 100%;} body.tool-sei .dz-sei-category__info {flex: 1;} body.tool-sei .dz-sei-category__name {font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;} body.tool-sei .dz-sei-category__count {font-size: 10px; color: var(--dz-text-dim); margin-top: 2px;} body.tool-sei .dz-sei-category__toggle {font-size: 13px; opacity: 0.5; transition: transform 0.3s;} body.tool-sei .dz-sei-category.collapsed .dz-sei-category__toggle {transform: rotate(-90deg);} body.tool-sei .dz-sei-category.collapsed .dz-sei-category__body {display: none;} body.tool-sei .dz-sei-category__body {animation: fade-slide-in 0.35s ease;} body.tool-sei .dz-sei-subcategory {margin-bottom: 16px;} body.tool-sei .dz-sei-subcategory__label {font-size: 10px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 8px 0; padding: 4px 8px; display: inline-block;} body.tool-sei .dz-sei-effect-list {display: flex; flex-direction: column; gap: 3px; list-style: none;} body.tool-sei .dz-sei-effect {border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.015); border-radius: 2px; transition: all 0.3s ease; cursor: pointer; overflow: hidden;} body.tool-sei .dz-sei-effect:hover {border-color: rgba(255,255,255,0.12);} body.tool-sei .dz-sei-effect.open {background: rgba(255,255,255,0.02);} body.tool-sei .dz-sei-effect__header {padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;} body.tool-sei .dz-sei-effect__name {font-size: 13px; color: var(--dz-text-bright); letter-spacing: 0.02em; line-height: 1.4; transition: color 0.3s;} body.tool-sei .dz-sei-effect.open .dz-sei-effect__name {} body.tool-sei .dz-sei-effect__slug {font-size: 9px; color: var(--dz-text-dim); margin-top: 2px; font-style: italic; letter-spacing: 0.03em;} body.tool-sei .dz-sei-effect__toggle {color: var(--dz-text-dim); font-size: 18px; transition: all 0.3s; flex-shrink: 0; font-weight: 300; line-height: 1;} body.tool-sei .dz-sei-effect.open .dz-sei-effect__toggle {transform: rotate(45deg);} body.tool-sei .dz-sei-effect__desc {max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);} body.tool-sei .dz-sei-effect__desc-inner {padding: 0 14px 12px 14px; font-size: 12.5px; line-height: 1.65; color: var(--dz-text); border-top: 1px solid rgba(255,255,255,0.04); padding-top: 10px;} body.tool-sei .dz-sei-effect__link {display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; opacity:0.85; transition:opacity .15s, transform .15s;} body.tool-sei .dz-sei-effect__link:hover {opacity:1; transform:translateX(2px); text-decoration:underline;} body.tool-sei .dz-sei-footer {margin-top: 48px; padding: 24px 0; border-top: 1px solid var(--dz-border); text-align: center;} body.tool-sei .dz-sei-footer p {font-size: 10px; color: var(--dz-text-dim); line-height: 1.8;} body.tool-sei .dz-sei-footer__brand {font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 0.3em; color: rgba(255,255,255,0.08); margin-top: 16px;} body.tool-sei .dz-sei-empty {text-align: center; padding: 60px 20px; color: var(--dz-text-dim); font-size: 12px; letter-spacing: 0.05em;} @media (max-width: 480px) { body.tool-sei .dz-sei-header {padding: 32px 16px 20px;} body.tool-sei .dz-sei-content {padding: 16px 12px 60px;} body.tool-sei .dz-sei-header__title {font-size: 22px;} body.tool-sei .dz-sei-category__name {font-size: 12px;} body.tool-sei .dz-sei-effect__name {font-size: 12px;} } /* ═══════════════════════════════════════════════════════════════ PAGES D'EFFETS (body.tool-effet) ═══════════════════════════════════════════════════════════════ */ body.tool-effet *, body.tool-effet *::before, body.tool-effet *::after {box-sizing: border-box;} body.tool-effet.page-drogues {background:#04040a; color:rgba(255,255,255,0.7); font-family:'Share Tech Mono',monospace; cursor:crosshair;} body.tool-effet .dz-scanline {position:fixed; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--acc),transparent); opacity:0.25; animation:dz-sweep 8s linear infinite; pointer-events:none; z-index:998;} body.tool-effet .eff-wrap {max-width:840px; margin:0 auto; padding:24px 20px 96px;} body.tool-effet .eff-crumb {font-size:11px; letter-spacing:0.04em; color:rgba(255,255,255,0.4); margin:18px 0 28px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;} body.tool-effet .eff-crumb a {color:rgba(255,255,255,0.55); text-decoration:none;} body.tool-effet .eff-crumb a:hover {color:var(--acc);} body.tool-effet .eff-crumb span.sep {opacity:0.3;} body.tool-effet .eff-crumb span.here {color:var(--acc);} body.tool-effet .eff-hero {margin:18px 0 34px; display:grid; grid-template-columns:1fr 120px; grid-template-rows:auto; gap:0 28px; align-items:center; min-height:160px;} body.tool-effet .eff-hero__watermark {grid-column:2; grid-row:1; width:120px; height:120px; pointer-events:none; opacity:0.18; filter:drop-shadow(0 0 18px color-mix(in srgb, var(--acc) 30%, transparent));} body.tool-effet .eff-hero__watermark svg {width:100%; height:100%;} body.tool-effet .eff-hero__txt {grid-column:1; grid-row:1; min-width:0;} body.tool-effet .eff-cat-tag {display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 35%, transparent); background:color-mix(in srgb, var(--acc) 8%, transparent); padding:5px 12px; border-radius:999px; text-decoration:none;} body.tool-effet .eff-cat-tag::before {content:''; width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc); animation:dz-pulse 2s infinite;} body.tool-effet .eff-h1 {font-family:'Orbitron',sans-serif !important; font-weight:900; font-size:clamp(26px,5vw,42px) !important; line-height:1.12 !important; letter-spacing:0.05em !important; color:var(--acc) !important; margin:0 0 10px !important; text-align:left !important; text-shadow:0 0 28px color-mix(in srgb, var(--acc) 40%, transparent);} body.tool-effet .eff-h1::before, body.tool-effet .eff-h1::after {content:none !important; display:none !important;} body.tool-effet .eff-sub {font-size:12px; color:rgba(255,255,255,0.4); letter-spacing:0.06em;} body.tool-effet .eff-sub a {color:var(--acc); text-decoration:none;} body.tool-effet .eff-sub a:hover {text-decoration:underline;} @media (max-width:560px) { body.tool-effet .eff-hero {grid-template-columns:1fr 80px; gap:0 16px;} body.tool-effet .eff-hero__watermark {width:80px; height:80px;} } body.tool-effet .eff-lead {font-size:15px; line-height:1.8; color:rgba(255,255,255,0.78); border-left:2px solid color-mix(in srgb, var(--acc) 50%, transparent); padding:14px 0 14px 20px; background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 6%, transparent), transparent);} body.tool-effet .eff-section {margin-top:48px;} body.tool-effet .eff-section > h2 {font-family:'Orbitron',sans-serif; font-size:14px; letter-spacing:0.1em; text-transform:uppercase; color:#fff; margin-bottom:6px; display:flex; align-items:center; gap:12px;} body.tool-effet .eff-section > h2::before {content:''; width:22px; height:2px; background:var(--acc); box-shadow:0 0 8px var(--acc); display:inline-block;} body.tool-effet .eff-section > h2::after {content:''; flex:1; height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 25%, transparent), transparent);} body.tool-effet .eff-section > .hint {font-size:11px; color:rgba(255,255,255,0.35); margin-bottom:18px; line-height:1.6;} body.tool-effet .eff-subs {list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px;} body.tool-effet .eff-subs li a {position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border:1px solid rgba(255,255,255,0.08); border-radius:8px; background:rgba(255,255,255,0.02); color:rgba(255,255,255,0.82); text-decoration:none; font-size:13px; transition:.2s; overflow:hidden;} body.tool-effet .eff-subs li a::before {content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--acc); transform:scaleY(0); transform-origin:bottom; transition:.2s;} body.tool-effet .eff-subs li a:hover {border-color:color-mix(in srgb, var(--acc) 55%, transparent); color:#fff; background:color-mix(in srgb, var(--acc) 8%, transparent);} body.tool-effet .eff-subs li a:hover::before {transform:scaleY(1);} body.tool-effet .eff-subs li a::after {content:'\2197'; color:var(--acc); opacity:0.5; font-size:12px;} body.tool-effet .eff-empty {font-size:13px; color:rgba(255,255,255,0.4); border:1px dashed rgba(255,255,255,0.12); border-radius:8px; padding:18px; line-height:1.7;} body.tool-effet .eff-related {list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px;} body.tool-effet .eff-related li a {display:inline-block; padding:7px 13px; border:1px solid rgba(255,255,255,0.1); border-radius:999px; color:rgba(255,255,255,0.7); text-decoration:none; font-size:12px; transition:.2s;} body.tool-effet .eff-related li a:hover {border-color:var(--acc); color:var(--acc);} body.tool-effet .eff-back {display:inline-flex; align-items:center; gap:8px; margin-top:52px; font-size:12px; color:rgba(255,255,255,0.55); text-decoration:none; letter-spacing:0.04em;} body.tool-effet .eff-back:hover {color:var(--acc);} body.tool-effet .eff-back::before {content:'\2190';} /* Bouton de signalement flottant (pages d'effets, pas de rail latéral) */ body.tool-effet { --accent: var(--acc); --accent-85: color-mix(in srgb, var(--acc) 85%, transparent); --accent-60: color-mix(in srgb, var(--acc) 60%, transparent); --accent-30: color-mix(in srgb, var(--acc) 30%, transparent); --accent-08: color-mix(in srgb, var(--acc) 8%, transparent); } body.tool-effet .report-wrapper {position:fixed; right:18px; bottom:18px; z-index:9000; margin:0;} body.tool-effet .report-side-btn {position:relative; width:52px; height:52px; display:flex; align-items:center; justify-content:center; cursor:pointer; outline:none; background:rgba(7,7,15,0.9); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.4); border-radius:6px; backdrop-filter:blur(8px); transition:color .2s, background .2s, border-color .2s; --c:rgba(255,255,255,0.18);} body.tool-effet .report-side-btn::before {content:''; position:absolute; top:-1px; left:-1px; width:8px; height:8px; border-top:1px solid var(--c); border-left:1px solid var(--c); transition:.2s;} body.tool-effet .report-side-btn::after {content:''; position:absolute; bottom:-1px; right:-1px; width:8px; height:8px; border-bottom:1px solid var(--c); border-right:1px solid var(--c); transition:.2s;} body.tool-effet .report-side-btn:hover, body.tool-effet .report-side-btn:focus-visible {color:var(--acc); border-color:color-mix(in srgb, var(--acc) 40%, transparent); background:color-mix(in srgb, var(--acc) 10%, transparent); --c:var(--acc);} body.tool-effet .report-side-btn:hover::before, body.tool-effet .report-side-btn:hover::after, body.tool-effet .report-side-btn:focus-visible::before, body.tool-effet .report-side-btn:focus-visible::after {width:13px; height:13px;} body.tool-effet .report-side-btn svg {width:22px; height:22px;}