/* ═══════════════════════════════════════════════════════════════ DRUGZ — style-drogues-v2.css Fichier CSS externe pour les pages substances (V2) Architecture : - Charger APRÈS style-common.css (si présent) - Chaque page substance utilise pour activer la couleur d'accent correspondante - Si besoin, surcharger --accent-r/g/b dans un ════════════════════════════════════════════════════════════ */ :root { /* Accent — valeurs R/G/B par défaut (empathogènes/MDMA) */ --accent-r: 147; --accent-g: 125; --accent-b: 255; /* ── Layout sticky (header + breadcrumb) ── */ --header-h: 56px; /* hauteur du header global drugz.fr */ --crumb-h: 44px; /* hauteur du fil d'Ariane sticky */ /* Fond */ --bg: #04040a; --bg-card: #07070f; --bg-card2: #0a0a14; /* Texte — contrastes améliorés WCAG */ --text-hi: rgba(255, 255, 255, 0.96); --text-mid: rgba(255, 255, 255, 0.82); /* remonté de 0.78 */ --text-lo: rgba(255, 255, 255, 0.58); /* remonté de 0.50 */ /* Bordures */ --border: rgba(255, 255, 255, 0.06); --border-hi: rgba(255, 255, 255, 0.10); /* Alertes */ --red: rgba(255, 59, 59, 1); --red-30: rgba(255, 59, 59, 0.30); --amber: rgba(255, 183, 0, 1); /* Espacements section */ --section-gap: 88px; --subsection-gap: 44px; } /* Les alias accent calculés vivent sur body pour se résoudre APRÈS les overrides body.category-xxx de --accent-r/g/b */ body { --accent: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 1); --accent-85: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.85); --accent-60: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.60); --accent-30: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.30); --accent-08: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08); } /* ════════════════════════════════════════════════════════════ 0b. COULEURS PAR CATÉGORIE Chaque page utilise . Les valeurs --accent-r/g/b sont surchargées ici, ce qui alimente automatiquement --accent, --accent-85, etc. ════════════════════════════════════════════════════════════ */ body.category-stimulants { --accent-r:240; --accent-g:134; --accent-b:117; } body.category-nps-stimulants { --accent-r:248; --accent-g:176; --accent-b:165; } body.category-depresseurs { --accent-r:210; --accent-g:197; --accent-b: 95; } body.category-benzodiazepines { --accent-r:245; --accent-g:237; --accent-b:135; } body.category-psychedeliques { --accent-r:211; --accent-g: 75; --accent-b:215; } body.category-nps-psychedeliques{ --accent-r:248; --accent-g:167; --accent-b:245; } body.category-dissociatifs { --accent-r:110; --accent-g:240; --accent-b:169; } body.category-nps-dissociatifs { --accent-r:160; --accent-g:248; --accent-b:209; } body.category-empathogenes { --accent-r:147; --accent-g:125; --accent-b:255; } body.category-nps-empathogenes { --accent-r:200; --accent-g:196; --accent-b:255; } body.category-cannabinoides { --accent-r:131; --accent-g:215; --accent-b: 75; } body.category-cannabinoides-synthetiques { --accent-r:160; --accent-g:224; --accent-b:143; } body.category-opioides { --accent-r:215; --accent-g:155; --accent-b: 75; } body.category-opioides-synthetiques { --accent-r:224; --accent-g:176; --accent-b:133; } body.category-cathinones { --accent-r:255; --accent-g: 87; --accent-b:145; } body.category-pyrovalerones { --accent-r:255; --accent-g:179; --accent-b:213; } body.category-article { --accent-r: 0; --accent-g:255; --accent-b:255; } /* ════════════════════════════════════════════════════════════ 1. RESET & FONDATIONS ════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } button { appearance: none; -webkit-appearance: none; background: none; border: none; font: inherit; color: inherit; cursor: pointer; } a { cursor: pointer; } html { background: var(--bg); } body { background: var(--bg); color: var(--text-mid); font-family: 'Exo 2', sans-serif; min-height: 100vh; } /* Scanlines — overlay cosmétique */ body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.10) 2px, rgba(0, 0, 0, 0.10) 3px ); pointer-events: none; z-index: 9000; } /* Grille animée — canvas injecté par bg-grid.js */ #bgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; } img { display: block; max-width: 100%; } a { color: var(--accent-85); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--accent); } /* Focus visible pour accessibilité clavier */ :focus-visible { outline: 2px solid var(--accent-60); outline-offset: 2px; } /* ── Curseur personnalisé (appareils souris uniquement) ── */ @media (pointer: fine) { *, *::before, *::after { cursor: none !important; } .cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); box-shadow: 0 0 8px var(--accent-60), 0 0 20px var(--accent-30); will-change: left, top; transition: width 0.18s ease, height 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .cursor-dot.is-hover { width: 10px; height: 10px; background: white; box-shadow: 0 0 12px rgba(255,255,255,0.5); } .cursor-dot.is-click { width: 18px; height: 18px; background: white; box-shadow: 0 0 20px rgba(255,255,255,0.7); } /* État texte : barre I-beam */ .cursor-dot.is-text { width: 2px; height: 18px; border-radius: 1px; background: var(--accent-85); box-shadow: 0 0 6px var(--accent-30); } } /* ════════════════════════════════════════════════════════════ 2. HEADER ════════════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 500; background: rgba(4, 4, 10, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; height: 56px; display: flex; align-items: center; gap: 32px; } .logo-link { display: flex; align-items: center; text-decoration: none; } .site-logo { height: 28px; width: auto; } /* Fallback logo texte */ .logo-text { font-family: 'Orbitron', monospace; font-weight: 900; font-size: 18px; letter-spacing: 4px; color: white; } .logo-text em { color: var(--accent); font-style: normal; } /* ── Search ── */ .site-search { flex: 1; display: flex; justify-content: center; align-items: center; overflow: visible; } .site-search-form { position: relative; width: 100%; max-width: 420px; display: flex; align-items: center; } .site-search-form::before { content: ''; position: absolute; left: 14px; width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: 0.55; pointer-events: none; background: url('../assets/icons/search.svg') no-repeat center / contain; } .site-search-input { width: 100%; padding: 7px 12px 7px 40px; border-radius: 4px; border: 1px solid var(--border-hi); background: rgba(255,255,255,0.04); color: var(--text-mid); font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 0.05em; outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .site-search-input:focus { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 3px rgba(255,255,255,0.04); } .site-search-input::placeholder { color: var(--text-lo); font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .site-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(0.92); width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; } .site-search-clear.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) scale(1); transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 0s; } .site-search-clear:hover { background: rgba(255,255,255,0.14); } .site-search-button { display: none !important; } .search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: rgba(10, 10, 20, 0.98); border: 1px solid var(--border-hi); border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03); list-style: none; padding: 8px; margin: 0; max-height: 360px; overflow: auto; z-index: 2000; } .search-suggestion-item { padding: 10px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-mid); border: 1px solid var(--border); background: rgba(255,255,255,0.02); font-size: 13px; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .search-suggestion-item:hover, .search-suggestion-item.focused, .search-suggestion-item[aria-selected="true"] { background: rgba(255,255,255,0.06); border-color: var(--border-hi); color: var(--text-hi); } .search-suggestion-item strong { font-weight: 600; } .search-suggestion-item .suggestion-meta { margin-left: auto; font-size: 10px; opacity: 0.9; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); color: #fff; font-family: 'Share Tech Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; } .main-nav { display: flex; align-items: center; gap: 2px; } .nav-link { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-lo); border: 1px solid transparent; border-radius: 2px; transition: color 0.2s, border-color 0.2s, background 0.2s; } .nav-link:hover { color: var(--text-mid); border-color: var(--border-hi); background: rgba(255,255,255,0.03); } .nav-link .nav-icon, .nav-link > img { width: 16px; height: 16px; opacity: 0.55; flex-shrink: 0; filter: brightness(0) invert(1); } .nav-link svg { width: 16px; height: 16px; opacity: 0.55; flex-shrink: 0; } .nav-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; } /* ── Breadcrumb sticky ── Reste collé sous le header pendant le scroll. Marges négatives symétriques pour étendre le fond jusqu'aux bords du .container malgré son padding interne. Comportement aligné sur les pages dossiers (style-dossier-v2.css). */ .breadcrumb { position: sticky; top: var(--header-h); z-index: 90; display: flex; align-items: center; height: var(--crumb-h); background: rgba(4, 4, 10, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); /* Étend le fond aux bords du .container (padding 0 80px) */ margin: 0 -80px; padding: 0 80px; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .breadcrumb a { color: var(--text-lo); text-decoration: none; transition: color 0.2s; } .breadcrumb a:hover { color: var(--accent-60); } .breadcrumb .sep { color: rgba(255, 255, 255, 0.15); margin: 0 10px; font-size: 9px; user-select: none; } .breadcrumb .category-tag { color: var(--accent-60); } .breadcrumb .current { color: var(--accent-85); } /* ════════════════════════════════════════════════════════════ 3. SIDEBAR — navigation flottante ════════════════════════════════════════════════════════════ */ .panel-toggle { display: none; } .button-panel { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; z-index: 200; } /* Le label secondaire côté est injecté par JS, mais v2 n'affiche pas de texte brut */ .nav-label-side { display: none; } .button-wrapper:hover .nav-label-side { display: block; position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.85); color: #fff; font-size: 10px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 250; } /* Trait vertical connecteur */ .panel-track { position: absolute; right: 29px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.04); pointer-events: none; z-index: -1; } .button-wrapper { display: flex; align-items: center; justify-content: flex-end; position: relative; } /* Tooltip label */ .button-wrapper::before { content: attr(data-label); position: absolute; right: calc(100% + 2px); top: 50%; transform: translateX(6px) translateY(-50%); white-space: nowrap; font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); background: var(--bg-card); border: 1px solid var(--border); padding: 5px 10px; pointer-events: none; opacity: 0; transition: opacity 0.15s, transform 0.15s; } .button-wrapper:hover::before { opacity: 1; transform: translateX(0) translateY(-50%); } /* Bouton nav */ .nav-button { position: relative; width: 60px; height: 60px; background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.07); border-right: none; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.22); transition: color 0.2s, background 0.2s, border-color 0.2s; outline: none; --c: rgba(255, 255, 255, 0.12); } /* Coins décoratifs */ .nav-button::before { content: ''; position: absolute; top: -1px; left: -1px; width: 7px; height: 7px; border-top: 1px solid var(--c); border-left: 1px solid var(--c); transition: border-color 0.2s, width 0.2s, height 0.2s; } .nav-button::after { content: ''; position: absolute; bottom: -1px; left: -1px; width: 7px; height: 7px; border-bottom: 1px solid var(--c); border-left: 1px solid var(--c); transition: border-color 0.2s, width 0.2s, height 0.2s; } .nav-button:hover, .button-wrapper:hover .nav-button { background: var(--accent-08); border-color: var(--accent-30); color: var(--accent-60); --c: var(--accent-60); } .nav-button:hover::before, .nav-button:hover::after, .button-wrapper:hover .nav-button::before, .button-wrapper:hover .nav-button::after { width: 12px; height: 12px; } /* État actif */ .nav-button.active { background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); border-color: var(--accent-30); color: var(--accent); --c: var(--accent-60); } .nav-button.active::before, .nav-button.active::after { width: 12px; height: 12px; } .nav-button.active .active-bar { display: block; } .active-bar { display: none; position: absolute; right: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-60); } .nav-button svg { width: 26px; height: 26px; } .btn-index { position: absolute; top: 3px; left: 4px; font-size: 6px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.10); line-height: 1; pointer-events: none; transition: color 0.2s; } .nav-button:hover .btn-index, .nav-button.active .btn-index { color: var(--accent-30); } /* ════════════════════════════════════════════════════════════ 4. SCROLL TO TOP ════════════════════════════════════════════════════════════ */ .scroll-to-top { position: fixed; bottom: 75px; right: 0; width: 60px; height: 60px; background: var(--bg-card); border: 1px solid var(--border-hi); border-right: none; color: var(--text-lo); display: flex; align-items: center; justify-content: center; z-index: 199; outline: none; transition: color 0.2s, border-color 0.2s, background 0.2s, opacity 0.3s, transform 0.3s; --c: rgba(255, 255, 255, 0.12); /* Caché par défaut, affiché via JS */ opacity: 0; transform: translateY(12px); pointer-events: none; } .scroll-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-to-top::before { content: ''; position: absolute; top: -1px; left: -1px; width: 7px; height: 7px; border-top: 1px solid var(--c); border-left: 1px solid var(--c); transition: border-color 0.2s; } .scroll-to-top::after { content: ''; position: absolute; bottom: -1px; left: -1px; width: 7px; height: 7px; border-bottom: 1px solid var(--c); border-left: 1px solid var(--c); transition: border-color 0.2s; } .scroll-to-top:hover { color: var(--accent-60); border-color: var(--accent-30); background: var(--accent-08); --c: var(--accent-60); } .scroll-to-top svg { width: 18px; height: 18px; fill: currentColor; } .back-to-index { position: fixed; bottom: 75px; left: 0; width: 60px; height: 60px; background: var(--bg-card); border: 1px solid var(--border-hi); border-left: none; color: var(--text-lo); display: flex; align-items: center; justify-content: center; z-index: 199; outline: none; text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; --c: rgba(255, 255, 255, 0.12); } .back-to-index::before { content: ''; position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-top: 1px solid var(--c); border-right: 1px solid var(--c); transition: border-color 0.2s; } .back-to-index::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 7px; height: 7px; border-bottom: 1px solid var(--c); border-right: 1px solid var(--c); transition: border-color 0.2s; } .back-to-index:hover { color: var(--accent-60); border-color: var(--accent-30); background: var(--accent-08); --c: var(--accent-60); } .back-to-index svg { width: 18px; height: 18px; fill: currentColor; } /* ════════════════════════════════════════════════════════════ 4b. RDR NOTICE OVERLAY (modal avertissement NPS) ════════════════════════════════════════════════════════════ */ html.rdr-notice-open { overflow: hidden; } .rdr-notice-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 4, 10, 0.92); backdrop-filter: blur(4px); z-index: 9999; padding: 20px; } .rdr-notice-overlay[hidden] { display: none !important; } .rdr-notice { position: relative; max-width: 640px; width: 90%; background: var(--bg-card); border: 1px solid var(--accent-30); border-top: 2px solid var(--accent-60); border-radius: 4px; padding: 28px 32px; box-shadow: 0 0 48px var(--accent-08), inset 0 0 0 1px var(--accent-08); max-height: 90vh; overflow-y: auto; } .rdr-notice h2 { font-family: 'Orbitron', monospace; font-size: clamp(13px, 1.6vw, 17px); font-weight: 700; color: var(--accent); letter-spacing: 1px; margin: 0 0 14px 0; padding-right: 28px; text-transform: uppercase; } .rdr-notice p, .rdr-notice ul { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--text-mid); line-height: 1.7; margin: 8px 0; } .rdr-notice ul { padding-left: 1.4rem; color: var(--text-lo); } .rdr-notice ul li::marker { color: var(--accent-60); } .rdr-notice-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-lo); transition: color 0.2s; padding: 0 4px; } .rdr-notice-close:hover { color: var(--accent); } .rdr-notice-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .rdr-notice-btn { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 0.08em; border-radius: 2px; cursor: pointer; text-decoration: none; display: inline-block; padding: 8px 16px; transition: background 0.2s, color 0.2s, border-color 0.2s; } .rdr-notice-btn-primary { background: var(--accent); border: 1px solid transparent; color: var(--bg); font-weight: 700; } .rdr-notice-btn-primary:hover { background: var(--accent-85); } .rdr-notice-btn-secondary { background: transparent; border: 1px solid var(--accent-30); color: var(--text-mid); } .rdr-notice-btn-secondary:hover { border-color: var(--accent-60); color: var(--accent); } @media (max-width: 520px) { .rdr-notice { padding: 20px 18px; } .rdr-notice h2 { font-size: 13px; } .rdr-notice-actions { flex-direction: column; } .rdr-notice-btn { text-align: center; } } /* ════════════════════════════════════════════════════════════ 5. LAYOUT PRINCIPAL ════════════════════════════════════════════════════════════ */ .container { max-width: 1100px; margin: 0 auto; padding: 0 80px 160px; position: relative; z-index: 1; } /* Décalage scroll pour les ancres sous le header + breadcrumb sticky */ .container [id], .container h2, .container .section[id] { scroll-margin-top: calc(var(--header-h) + var(--crumb-h) + 24px); } /* ════════════════════════════════════════════════════════════ 6. COMPOSANT TITRE SUBSTANCE ════════════════════════════════════════════════════════════ */ .drug-title-component { display: flex; align-items: flex-start; gap: 20px; padding: 48px 0 36px; } /* Barre verticale SVG */ .drug-title-vbar { flex-shrink: 0; margin-top: 4px; } .drug-title-vbar .vbar-track { stroke: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12); } .drug-title-vbar .vbar-active { stroke: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.85); } .drug-title-vbar .vbar-dot-hi { fill: var(--accent); } .drug-title-vbar .vbar-dot-lo { stroke: var(--accent-60); fill: none; } .drug-title-vbar .vbar-tick-hi { stroke: var(--accent-60); } .drug-title-vbar .vbar-tick-lo { stroke: var(--accent-30); } .drug-title-vbar .vbar-label { fill: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35); } .drug-title-supertitle svg line { stroke: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.45); } .drug-title-content { display: flex; flex-direction: column; } .drug-title-supertitle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .drug-title-supertitle-num, .drug-title-supertitle-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.28em; color: var(--accent-60); text-transform: uppercase; } .drug-title-main, .drug-title-name { font-family: 'Orbitron', monospace; font-weight: 700; font-size: clamp(20px, 2.8vw, 38px); letter-spacing: 2px; line-height: 1.15; color: white; background: none; -webkit-text-fill-color: white; } .drug-title-main em, .drug-title-name em { color: var(--accent); -webkit-text-fill-color: var(--accent); font-style: normal; } .drug-title-body { font-family: 'Exo 2', sans-serif; font-size: 14.5px; line-height: 1.95; max-width: 700px; margin-top: 16px; color: var(--text-mid); opacity: 0.75; } /* Badge légal v2 — .drug-title-legal-badge ── défaut (rouge) : psychotrope illégal ── --legal (vert) : modifier class drug-title-legal-badge--legal ── --controlled (jaune) : drug-title-legal-badge--controlled */ .drug-title-legal-badge { display: inline-flex; align-items: stretch; margin-top: 22px; position: relative; } .drug-title-legal-status { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid rgba(255, 59, 59, 0.45); border-right: none; background: rgba(255, 30, 30, 0.05); position: relative; } .drug-title-legal-status::before { content: ''; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; border-top: 1.5px solid var(--red); border-left: 1.5px solid var(--red); } .drug-title-legal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } } .drug-title-legal-label { font-family: 'Orbitron', monospace; font-weight: 900; font-size: 9px; letter-spacing: 0.22em; color: rgba(255, 59, 59, 0.95); text-transform: uppercase; white-space: nowrap; } .drug-title-legal-sep { width: 1px; background: var(--red-30); flex-shrink: 0; } .drug-title-legal-law { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(255, 59, 59, 0.18); border-left: none; background: rgba(255, 30, 30, 0.02); position: relative; } .drug-title-legal-law::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 6px; height: 6px; border-bottom: 1.5px solid var(--red); border-right: 1.5px solid var(--red); } .drug-title-legal-law-ref { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: var(--text-lo); white-space: nowrap; } .drug-title-legal-law-ref strong { color: rgba(255, 255, 255, 0.5); font-weight: normal; } /* Variante légal (vert) */ .drug-title-legal-badge--legal .drug-title-legal-status { border-color: rgba(60, 220, 90, 0.45); background: rgba(60, 220, 90, 0.05); } .drug-title-legal-badge--legal .drug-title-legal-status::before { border-top-color: rgba(60, 220, 90, 1); border-left-color: rgba(60, 220, 90, 1); } .drug-title-legal-badge--legal .drug-title-legal-dot { background: rgba(60, 220, 90, 1); } .drug-title-legal-badge--legal .drug-title-legal-label { color: rgba(60, 220, 90, 0.95); } .drug-title-legal-badge--legal .drug-title-legal-sep { background: rgba(60, 220, 90, 0.30); } .drug-title-legal-badge--legal .drug-title-legal-law { border-color: rgba(60, 220, 90, 0.18); background: rgba(60, 220, 90, 0.02); } .drug-title-legal-badge--legal .drug-title-legal-law::after { border-bottom-color: rgba(60, 220, 90, 1); border-right-color: rgba(60, 220, 90, 1); } /* Variante contrôlé (jaune) */ .drug-title-legal-badge--controlled .drug-title-legal-status { border-color: rgba(255, 225, 0, 0.45); background: rgba(255, 225, 0, 0.05); } .drug-title-legal-badge--controlled .drug-title-legal-status::before { border-top-color: rgba(255, 225, 0, 1); border-left-color: rgba(255, 225, 0, 1); } .drug-title-legal-badge--controlled .drug-title-legal-dot { background: rgba(255, 225, 0, 1); } .drug-title-legal-badge--controlled .drug-title-legal-label { color: rgba(255, 225, 0, 0.95); } .drug-title-legal-badge--controlled .drug-title-legal-sep { background: rgba(255, 225, 0, 0.30); } .drug-title-legal-badge--controlled .drug-title-legal-law { border-color: rgba(255, 225, 0, 0.18); background: rgba(255, 225, 0, 0.02); } .drug-title-legal-badge--controlled .drug-title-legal-law::after { border-bottom-color: rgba(255, 225, 0, 1); border-right-color: rgba(255, 225, 0, 1); } /* Badges de statut légal ── illegal-badge (rouge) · Psychotrope illégal ── controlled-badge (ambre) · Psychotrope réglementé ── legal-badge (vert) · Psychotrope légal Chaque variante pose --lb-r/g/b ; les enfants s'y réfèrent. */ .illegal-badge, .legal-badge, .controlled-badge { display: inline-flex; align-items: stretch; margin-top: 22px; position: relative; } .illegal-badge { --lb-r: 255; --lb-g: 59; --lb-b: 59; } .legal-badge { --lb-r: 60; --lb-g: 220; --lb-b: 90; } .controlled-badge { --lb-r: 255; --lb-g: 200; --lb-b: 0; } /* Partie gauche — statut */ .lb-status { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.45); background: rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.05); position: relative; } .lb-status::before { content: ''; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; border-top: 1.5px solid rgba(var(--lb-r), var(--lb-g), var(--lb-b), 1); border-left: 1.5px solid rgba(var(--lb-r), var(--lb-g), var(--lb-b), 1); } .lb-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--lb-r), var(--lb-g), var(--lb-b), 1); flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } } .lb-icon { color: rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.75); flex-shrink: 0; display: flex; } .lb-label { font-family: 'Orbitron', monospace; font-weight: 900; font-size: 9px; letter-spacing: 0.22em; color: rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.95); text-transform: uppercase; white-space: nowrap; } /* Séparateur */ .lb-sep { width: 1px; background: rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.30); flex-shrink: 0; } /* Partie droite — référence légale */ .lb-law { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.18); background: rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.02); position: relative; } .lb-law::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 6px; height: 6px; border-bottom: 1.5px solid rgba(var(--lb-r), var(--lb-g), var(--lb-b), 1); border-right: 1.5px solid rgba(var(--lb-r), var(--lb-g), var(--lb-b), 1); } .lb-law-ref { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: var(--text-lo); white-space: nowrap; } .lb-law-ref strong { color: rgba(255, 255, 255, 0.5); font-weight: normal; } /* ────────────────────────────────────────────────────────── BLOC B — remplace lignes 3450 à 3461 (dans @media max-width: 960px) ────────────────────────────────────────────────────────── */ .illegal-badge, .legal-badge, .controlled-badge { flex-wrap: wrap; } .lb-law { border-left: 1px solid rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.18); border-top: none; } .lb-law-ref { white-space: normal; line-height: 1.5; } /* ────────────────────────────────────────────────────────── BLOC C — remplace lignes 3595 à 3615 (dans @media max-width: 640px) ────────────────────────────────────────────────────────── */ /* Badge légal en colonne */ .illegal-badge, .legal-badge, .controlled-badge { flex-direction: column; align-items: stretch; } .lb-status { justify-content: center; } .lb-sep { width: 100%; height: 1px; } .lb-law { border-top: 1px solid rgba(var(--lb-r), var(--lb-g), var(--lb-b), 0.18); } .lb-law-ref { white-space: normal; line-height: 1.5; font-size: 8px; } /* ════════════════════════════════════════════════════════════ 6b. BARRE RÉSUMÉ « EN BREF » ════════════════════════════════════════════════════════════ */ .drug-summary-bar { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 8px 0 0; border: 1px solid var(--accent-30); background: var(--bg-card); position: relative; } /* Coins décoratifs */ .drug-summary-bar::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1.5px solid var(--accent-60); border-left: 1.5px solid var(--accent-60); } .drug-summary-bar::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1.5px solid var(--accent-60); border-right: 1.5px solid var(--accent-60); } .summary-item { flex: 1 1 0; min-width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 12px; gap: 6px; } .summary-sep { width: 1px; align-self: stretch; background: var(--accent-30); flex-shrink: 0; } .summary-label { font-family: 'Share Tech Mono', monospace; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-lo); } .summary-value { font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); } .summary-risk-low { color: rgba(110, 240, 169, 0.9); } .summary-risk-moderate { color: var(--amber); } .summary-risk-high { color: var(--red); } @media (max-width: 700px) { .drug-summary-bar { flex-wrap: wrap; } .summary-item { min-width: 80px; flex: 1 1 30%; padding: 10px 8px; border-bottom: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); } .summary-item:last-child, .summary-item:nth-last-child(-n+3) { border-bottom: none; } .summary-sep { display: none; } } /* ════════════════════════════════════════════════════════════ 6c. TIMELINE EFFETS (SVG composant) ════════════════════════════════════════════════════════════ */ .effect-timeline-container { margin: 28px 0 8px; padding: 20px 20px 16px; background: var(--bg-card); border: 1px solid var(--border); position: relative; } .effect-timeline-container::before { content: ''; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; border-top: 1px solid var(--accent-30); border-left: 1px solid var(--accent-30); } .effect-timeline-container::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 6px; height: 6px; border-bottom: 1px solid var(--accent-30); border-right: 1px solid var(--accent-30); } .effect-timeline-svg { width: 100%; height: auto; display: block; } /* ════════════════════════════════════════════════════════════ 7. SECTIONS & TYPOGRAPHIE ════════════════════════════════════════════════════════════ */ .section { padding-top: 8px; } /* H2 */ .section > h2 { position: relative; margin: var(--section-gap) 0 36px; font-family: 'Jockey One', sans-serif; font-weight: 400; font-size: clamp(18px, 2.4vw, 28px); letter-spacing: 2px; text-transform: uppercase; line-height: 1.2; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 14px var(--accent-30)); padding-bottom: 12px; } .section > h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40%; height: 2px; background: linear-gradient(90deg, var(--accent-60), transparent); border-radius: 1px; } /* Séparateur de section */ .section-sep { width: 100%; height: 1px; background: linear-gradient(to right, var(--border-hi), transparent); } /* H3 */ .subsection > h3 { display: flex; align-items: baseline; gap: 10px; margin: var(--subsection-gap) 0 18px; font-family: 'Orbitron', monospace; font-weight: 400; font-size: clamp(10px, 1.2vw, 13px); letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); background: none; -webkit-text-fill-color: unset; } .subsection > h3::before { content: '//'; font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--accent-50); flex-shrink: 0; } .subsection > h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); margin-bottom: 2px; } /* H4 */ h4, .calc-header h4, .dosage-card h4, .mixtures-local h4 { font-family: 'Share Tech Mono', monospace; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-85); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; background: none; -webkit-text-fill-color: unset; } h4::before, .calc-header h4::before, .dosage-card h4::before, .mixtures-local h4::before { content: ''; display: block; width: 18px; height: 2px; background: var(--accent-60); flex-shrink: 0; border-radius: 1px; } /* Espace au-dessus des h4 dans le contenu texte */ .subsection h4 { margin-top: 36px; } /* Paragraphes */ .subsection p, .section > p { font-family: 'Exo 2', sans-serif; font-size: 16px; line-height: 1.95; color: var(--text-hi); max-width: 860px; margin-bottom: 14px; } .subsection p strong { color: var(--text-hi); font-weight: 600; } .subsection p a:not(.doi-download):not(.doi-external) { color: var(--accent-85); border-bottom: 1px solid var(--accent-60); transition: color 0.2s, border-color 0.2s; } .subsection p a:not(.doi-download):not(.doi-external):hover { color: var(--accent); border-color: var(--accent-60); } /* Listes non classées dans les sections de contenu */ .subsection ul:not([class]), .subsection ol:not([class]), .section > ul:not([class]), .section > ol:not([class]) { font-family: 'Exo 2', sans-serif; font-size: 16px; line-height: 1.95; color: var(--text-hi); max-width: 860px; padding-left: 1.4em; margin-bottom: 14px; } .subsection ul:not([class]) li, .subsection ol:not([class]) li, .section > ul:not([class]) li, .section > ol:not([class]) li { margin-bottom: 6px; } .subsection ul:not([class]) li::marker, .section > ul:not([class]) li::marker { color: var(--accent-60); } .subsection ol:not([class]) li::marker, .section > ol:not([class]) li::marker { color: var(--accent-60); font-weight: 600; } /* Note */ .dosage-note { font-size: 10px !important; letter-spacing: 0.1em; color: var(--text-lo) !important; line-height: 1.6; margin-top: 10px !important; margin-bottom: 0 !important; text-align: left !important; } .figure-separator { border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 12px 0 0; } /* ══════════════════════════════════════════════════════════ CONTENT LIST ══════════════════════════════════════════════════════════ */ .content-list { list-style: none; padding-left: 0; margin: 12px 0 16px; } .content-list li { padding: 8px 0 8px 1em; border-bottom: 1px solid rgba(255, 255, 255, 0.06); line-height: 1.6; position: relative; font-size: 0.9rem; color: var(--text); } .content-list li::before { content: '–'; position: absolute; left: 0; color: var(--accent-60); } .content-list li:last-child { border-bottom: none; } /* ══════════════════════════════════════════════════════════ ALKALOIDS TABLE ══════════════════════════════════════════════════════════ */ .alkaloids-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 0.85rem; color: var(--text); } .alkaloids-table thead tr { border-bottom: 1px solid var(--accent-40); } .alkaloids-table thead th { padding: 8px 12px; text-align: left; font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-60); font-weight: 500; } .alkaloids-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s; } .alkaloids-table tbody tr:hover { background: rgba(255,255,255,0.03); } .alkaloids-table tbody td { padding: 9px 12px; vertical-align: top; line-height: 1.5; } .alkaloids-table tbody td:first-child { font-weight: 600; color: var(--text-hi); white-space: nowrap; } .alkaloids-table tbody td:nth-child(2) { font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; color: var(--accent-85); white-space: nowrap; } /* ══════════════════════════════════════════════════════════ PHARMACOLOGIE — Composants visuels ══════════════════════════════════════════════════════════ */ .pharma-intro-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-60); margin: 28px 0 14px; } /* Grille des 3 neurotransmetteurs */ .pharma-nt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; margin: 0 0 var(--subsection-gap); } .pharma-nt-card { background: var(--bg-card); border: 1px solid var(--border); padding: 22px 22px 18px; position: relative; transition: border-color 0.25s, box-shadow 0.25s; } .pharma-nt-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 1px solid var(--accent-30); border-left: 1px solid var(--accent-30); transition: width 0.2s, height 0.2s; } .pharma-nt-card:hover::before { width: 16px; height: 16px; } .pharma-nt-card:hover { border-color: var(--accent-30); box-shadow: 0 4px 24px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); } .pharma-nt-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pharma-nt-icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--accent); } .pharma-nt-icon svg { width: 100%; height: 100%; } .pharma-nt-name { display: block; font-family: 'Orbitron', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--text-hi); } .pharma-nt-aka { display: block; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.15em; color: var(--text-lo); margin-top: 2px; } /* Barre d'impact */ .pharma-nt-bar { height: 3px; background: var(--border); margin-bottom: 14px; position: relative; } .pharma-nt-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.6), rgba(var(--accent-r), var(--accent-g), var(--accent-b), 1)); transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } .pharma-nt-desc { font-family: 'Exo 2', sans-serif; font-size: 13.5px; line-height: 1.85; color: var(--text-mid); margin-bottom: 12px; } .pharma-nt-desc strong { color: var(--text-hi); font-weight: 600; } .pharma-nt-tag { display: inline-block; font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: var(--accent-60); padding: 4px 0 0; border-top: 1px solid var(--border); width: 100%; } /* Grille mécanismes complémentaires */ .pharma-extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; margin: 4px 0 0; } .pharma-extra-card { background: var(--bg-card); border: 1px solid var(--border); padding: 18px 20px 16px; position: relative; transition: border-color 0.25s; } .pharma-extra-card:hover { border-color: rgba(255, 255, 255, 0.12); } .pharma-extra-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; border-top: 1px solid var(--accent-30); border-left: 1px solid var(--accent-30); } .pharma-extra-label { display: block; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .pharma-extra-card p { font-family: 'Exo 2', sans-serif !important; font-size: 13px !important; line-height: 1.85 !important; color: var(--text-mid); margin: 0 !important; } .pharma-extra-card p em { color: var(--accent-60); font-style: italic; } .pharma-extra-card p strong { color: var(--text-hi); font-weight: 600; } /* ══════════════════════════════════════════════════════════ */ /* ── Tags effets (morph flow) ── */ .effect-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; } /* ── Avertissement contextuel (section effets) ─────────────── */ .effects-notice { position: relative; margin: 12px 0 20px; padding: 14px 18px 14px 48px; border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15); background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.03); font-family: 'Exo 2', sans-serif; font-size: 12.5px; line-height: 1.8; color: var(--text-mid); letter-spacing: 0.01em; } .effects-notice::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.45); border-left: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.45); } .effects-notice::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.45); border-right: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.45); } .effects-notice .notice-icon { position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.55); } .effects-notice strong { font-style: normal; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.85); } .effect-tag { --c-r: var(--accent-r); --c-g: var(--accent-g); --c-b: var(--accent-b); display: flex; flex-direction: column; padding: 5px 10px; background: rgba(var(--c-r), var(--c-g), var(--c-b), 0.06); border: 1px solid rgba(var(--c-r), var(--c-g), var(--c-b), 0.22); cursor: pointer; user-select: none; position: relative; flex: 0 0 auto; order: 0; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, padding 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), flex-basis 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), order 0s; } .effect-tag::before { content: ''; position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-top: 1px solid rgba(var(--c-r), var(--c-g), var(--c-b), 0.50); border-left: 1px solid rgba(var(--c-r), var(--c-g), var(--c-b), 0.50); transition: width 0.3s 0.06s, height 0.3s 0.06s; } .effect-tag::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 0; height: 0; border-bottom: 1px solid var(--border-hi); border-right: 1px solid var(--border-hi); transition: width 0.3s 0.1s, height 0.3s 0.1s; } .effect-tag:hover { border-color: rgba(var(--c-r), var(--c-g), var(--c-b), 0.42); background: rgba(var(--c-r), var(--c-g), var(--c-b), 0.10); } /* Nom de l'effet */ .effect-tag .tag-name { display: flex; align-items: center; gap: 7px; font-family: 'Share Tech Mono', monospace; font-size: 13px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78); line-height: 1; white-space: nowrap; transition: color 0.3s, font-size 0.35s, letter-spacing 0.35s; } .effect-tag .tag-diamond { width: 5px; height: 5px; border: 1px solid rgba(var(--c-r), var(--c-g), var(--c-b), 0.7); transform: rotate(45deg); flex-shrink: 0; display: inline-block; transition: background 0.3s, width 0.25s, height 0.25s; } /* Barre accent */ .effect-tag .tag-bar { display: block; height: 1px; background: rgba(var(--c-r), var(--c-g), var(--c-b), 0.40); width: 0; margin: 0; transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.06s, margin 0.35s; } /* Description */ .effect-tag .tag-desc { display: block; overflow: hidden; height: 0; opacity: 0; font-family: 'Exo 2', sans-serif; font-size: 12.5px; line-height: 1.8; color: var(--text-mid); letter-spacing: 0; transition: height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s 0.06s; } /* État ouvert — morph en mini-card */ .effect-tag.is-open { order: -1; flex: 1 0 100%; background: var(--bg-card); border-color: rgba(var(--c-r), var(--c-g), var(--c-b), 0.35); padding: 14px 18px 16px; box-shadow: 0 2px 20px rgba(var(--c-r), var(--c-g), var(--c-b), 0.06); } .effect-tag.is-open::before { width: 10px; height: 10px; } .effect-tag.is-open::after { width: 7px; height: 7px; } .effect-tag.is-open .tag-name { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--c-r), var(--c-g), var(--c-b), 1); white-space: normal; } .effect-tag.is-open .tag-diamond { width: 6px; height: 6px; background: rgba(var(--c-r), var(--c-g), var(--c-b), 0.40); } .effect-tag.is-open .tag-bar { width: 28px; margin: 8px 0 8px; } .effect-tag.is-open .tag-desc { opacity: 1; } /* Fade des voisins quand un badge est ouvert */ .effect-list.has-open .effect-tag:not(.is-open) { opacity: 0.55; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, padding 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), flex-basis 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s, order 0s; } .effect-list.has-open .effect-tag:not(.is-open):hover { opacity: 0.85; } /* Variantes neg / danger */ .effect-tag.neg { --c-r: 255; --c-g: 160; --c-b: 80; } .effect-tag.danger { --c-r: 255; --c-g: 70; --c-b: 70; } /* ── Catégories d'effets (autogroup) ── */ .effects-category { margin-top: 0; } .effects-category__title { display: flex; align-items: center; gap: 8px; font-family: 'Share Tech Mono', monospace; font-size: 13px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .effects-category__icon { font-size: 14px; line-height: 1; opacity: 0.8; } .reference-figure { margin: 8px 0 0; font-family: 'Exo 2', sans-serif; font-size: 10px; color: rgba(255, 255, 255, 0.8); line-height: 1.75; } /* ── Figures / images ── */ .image-figure { margin: 20px 0; position: relative; } .image-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--border); transition: border-color 0.25s; } .image-figure:hover img { border-color: var(--accent-30); } .image-figure figcaption { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--text-lo); margin-top: 8px; text-align: center; } /* ── Keylist ──────────────────────────────────────────────── Liste argumentée avec marqueur accent et séparateurs subtils. Utilisée dans les sections risques / e-cigarette. ──────────────────────────────────────────────────────────── */ .keylist { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 0; } .keylist > li { font-family: 'Exo 2', sans-serif; font-size: 15px; line-height: 1.95; color: var(--text-hi); max-width: 860px; padding: 16px 0 16px 24px; border-top: 1px solid var(--border); position: relative; } .keylist > li:last-child { border-bottom: 1px solid var(--border); } /* Marqueur accent vertical */ .keylist > li::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; background: linear-gradient( to bottom, var(--accent-60), var(--accent-08) ); border-radius: 1px; } /* Index numéroté (optionnel via counter) */ .keylist { counter-reset: keylist-counter; } .keylist > li::after { counter-increment: keylist-counter; content: counter(keylist-counter, decimal-leading-zero); position: absolute; right: 0; top: 16px; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--accent-30); opacity: 0.6; } /* Tooltips et liens dans la keylist */ .keylist .tooltip-term { color: var(--accent-85); } .keylist a:not(.doi-download):not(.doi-external) { color: var(--accent-85); border-bottom: 1px solid var(--accent-60); transition: color 0.2s, border-color 0.2s; } .keylist a:not(.doi-download):not(.doi-external):hover { color: var(--accent); border-color: var(--accent-60); } /* ── Responsive ── */ @media (max-width: 768px) { .keylist > li { font-size: 14px; line-height: 1.85; padding: 14px 0 14px 18px; } .keylist > li::after { display: none; } } .citation-scientifique { margin: 16px 0 0; } .citation-scientifique blockquote { background: var(--bg-card); border: 1px solid var(--border); padding: 18px 22px 16px; margin: 0; position: relative; transition: border-color 0.25s, box-shadow 0.25s; } .citation-scientifique blockquote:hover { border-color: var(--accent-30); box-shadow: 0 4px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); } /* Coin haut-gauche accent */ .citation-scientifique blockquote::before { content: ''; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border-top: 1px solid var(--accent-60); border-left: 1px solid var(--accent-60); transition: width 0.2s, height 0.2s; } .citation-scientifique blockquote:hover::before { width: 18px; height: 18px; } /* Coin bas-droite discret */ .citation-scientifique blockquote::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1px solid var(--border-hi); border-right: 1px solid var(--border-hi); transition: width 0.2s, height 0.2s, border-color 0.2s; } .citation-scientifique blockquote:hover::after { width: 14px; height: 14px; border-color: var(--accent-30); } .citation-scientifique blockquote p { margin: 0; font-size: 0.93rem; line-height: 1.85; color: rgba(255, 255, 255, 0.8); font-style: italic; } .citation-scientifique blockquote footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .citation-scientifique blockquote footer cite { font-style: normal; font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); display: block; font-family: 'Exo 2', sans-serif; letter-spacing: 0.02em; } .citation-scientifique blockquote footer cite em { color: rgba(255, 255, 255, 0.45); font-style: italic; } /* ── Factor cards (grille addictivité / risques) ── */ .factor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; margin-top: 20px; } .factor-card { background: var(--bg-card); border: 1px solid var(--border); padding: 16px 16px 14px; position: relative; transition: border-color 0.25s, box-shadow 0.25s; cursor: default; } .factor-card:hover { border-color: var(--accent-30); box-shadow: 0 4px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); } .factor-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .factor-card-header h4 { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-hi); margin: 0; } .factor-icon { width: 22px; height: 22px; opacity: 0.8; color: var(--accent-85); flex-shrink: 0; } .factor-card p { font-size: 13px; line-height: 1.75; color: var(--text-mid); margin: 0; } /* ── Témoignage utilisateur ── */ .temoignage { margin: 20px 0 0; position: relative; } .temoignage blockquote { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-60); padding: 22px 22px 18px 30px; margin: 0; position: relative; transition: border-color 0.25s, box-shadow 0.25s; overflow: hidden; } .temoignage blockquote:hover { border-color: var(--accent-30); border-left-color: var(--accent); box-shadow: 0 4px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.07); } .temoignage blockquote:hover::before { color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.2); } .temoignage blockquote p { margin: 0; font-size: 0.93rem; line-height: 1.9; color: rgba(255, 255, 255, 0.82); font-style: italic; position: relative; } .temoignage figcaption { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-left: 4px; } .temoignage-auteur { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--accent-60); } .temoignage-source { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.12); } /* ── Composants pharmacologie (synapse, mechanism, brain toggle) ── */ .synapse-animation { margin: 20px 0; background: var(--bg-card); border: 1px solid var(--border); padding: 16px; overflow: hidden; } .synapse-animation svg { width: 100%; height: auto; } .synapse-caption { font-size: 11px; color: var(--text-lo); line-height: 1.7; margin-top: 12px; } .nt-legend { display: flex; gap: 20px; justify-content: center; margin: 12px 0 0; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-mid); } .legend-shape { width: 10px; height: 10px; display: inline-block; } .circle-shape { border-radius: 50%; background: #ff6b6b; } .square-shape { background: #66b3ff; } .triangle-shape { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #ffd966; } .mechanism-block { margin: 24px 0; position: relative; } .mechanism-card { position: relative; border: 1px solid var(--accent-20); border-left: 3px solid var(--accent-60); border-radius: 4px; background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.03); padding: 40px 24px 20px; margin: 24px 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.1); } .mechanism-card:hover { border-color: var(--accent-40); border-left-color: var(--accent); background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05); box-shadow: 0 8px 25px -10px rgba(0, 0, 0, 0.15); } .mechanism-card.is-simplified { border-left-color: #ffd700; /* Or pour le mode simplifié/ampoule */ } .mechanism-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05) 0%, transparent 50%); pointer-events: none; } /* Sweep lumineux au toggle */ .mechanism-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06) 40%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10) 50%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06) 60%, transparent 100% ); pointer-events: none; z-index: 3; opacity: 0; } .mechanism-card.sweeping::after { animation: cardSweep 0.55s ease-out forwards; } @keyframes cardSweep { 0% { left: -100%; opacity: 1; } 100% { left: 100%; opacity: 0; } } /* État simplifié */ .mechanism-card.is-simplified { border-color: #ffd700; border-left-color: #ffd700; border-left-width: 3px; padding-left: 24px; background: rgba(255, 215, 0, 0.05); box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.04), 0 4px 15px -5px rgba(0, 0, 0, 0.1); } /* Label carte (haut gauche) */ .mechanism-card__label { position: absolute; top: 10px; left: 18px; font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; user-select: none; overflow: hidden; height: 1.3em; } .mechanism-card__label-text { display: block; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; color: var(--accent); } .mechanism-card__label-text--tech { transform: translateY(0); opacity: 1; } .mechanism-card__label-text--simple { position: absolute; top: 0; left: 0; transform: translateY(100%); opacity: 0; } .mechanism-card.is-simplified .mechanism-card__label-text--tech { transform: translateY(-100%); opacity: 0; } .mechanism-card.is-simplified .mechanism-card__label-text--simple { transform: translateY(0); opacity: 1; color: #ffd700; } /* Corps texte — crossfade + blur */ .mechanism-card__body { position: relative; transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .mechanism-card__text { font-size: 14px; line-height: 1.7; color: var(--text-mid); width: 100%; } .mechanism-card__text strong { color: var(--accent); } .mechanism-card__text--technical { opacity: 1; filter: blur(0); transform: translateY(0); transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease; } .mechanism-card__text--simple { position: absolute; top: 0; left: 0; right: 0; opacity: 0; filter: blur(4px); transform: translateY(10px); pointer-events: none; transition: opacity 0.35s ease 0.08s, filter 0.35s ease 0.08s, transform 0.35s ease 0.08s; background: rgba(255, 215, 0, 0.05); border-radius: 4px; padding: 12px 16px; border: 1px dashed rgba(255, 215, 0, 0.2); } .mechanism-card__text--simple p:first-child::before { content: '💡 VERSION VULGARISÉE'; font-weight: 800; color: #ffd700; text-transform: uppercase; font-size: 0.75em; display: block; margin-bottom: 8px; letter-spacing: 0.1em; } .mechanism-card.is-simplified .mechanism-card__text--technical { opacity: 0; filter: blur(4px); transform: translateY(-10px); pointer-events: none; position: absolute; top: 0; left: 0; right: 0; } .mechanism-card.is-simplified .mechanism-card__text--simple { opacity: 1; filter: blur(0); transform: translateY(0); z-index: 2; pointer-events: auto; position: relative; } /* Bouton toggle (haut droite) */ .brain-toggle-btn { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--accent); z-index: 5; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; } .brain-toggle-btn::before { content: 'Vulgariser'; position: absolute; right: 40px; background: var(--accent); color: #000; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; opacity: 0; transform: translateX(10px); transition: all 0.2s ease; pointer-events: none; white-space: nowrap; } .brain-toggle-btn:hover::before { opacity: 1; transform: translateX(0); } .brain-toggle-btn:hover { color: var(--accent); transform: scale(1.1); } .brain-toggle-btn:active { transform: scale(0.9); } .mechanism-card.is-simplified .brain-toggle-btn { color: #ffd700; } .mechanism-card.is-simplified .brain-toggle-btn::before { content: 'Détailler'; background: #ffd700; } /* Icône ampoule */ .brain-icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; opacity: 0.8 !important; filter: none !important; animation: none !important; transition: all 0.3s ease; } .brain-toggle-btn:hover .brain-icon { filter: drop-shadow(0 0 5px currentColor) !important; } .mechanism-card.is-simplified .brain-icon { fill: rgba(255, 215, 0, 0.2); } /* Fin style mechanism-card */ .brain-icon.flash { animation: bulbFlash 0.4s ease-out forwards !important; } @keyframes bulbPulse { 0%, 100% { opacity: 0.4; filter: brightness(0) invert(1) drop-shadow(0 0 0 rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0)); } 50% { opacity: 0.7; filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3)); } } @keyframes bulbFlash { 0% { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.8)) drop-shadow(0 0 16px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.4)); } 100% { opacity: 0.9; filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5)); } } /* Label bouton (slide vertical) - masqué selon la demande */ .brain-toggle-label { display: none !important; } .brain-toggle-label__text { display: block; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; color: var(--accent-60); line-height: 1.2em; } .brain-toggle-label__text--simplify { transform: translateY(0); opacity: 1; } .brain-toggle-label__text--technical { transform: translateY(100%); opacity: 0; position: absolute; top: 0; left: 0; } .mechanism-card.is-simplified .brain-toggle-label__text--simplify { transform: translateY(-100%); opacity: 0; } .mechanism-card.is-simplified .brain-toggle-label__text--technical { transform: translateY(0); opacity: 1; color: var(--accent-85); } .brain-toggle-btn:hover .brain-toggle-label__text { color: var(--accent); } /* Accessibilité */ @media (prefers-reduced-motion: reduce) { .brain-icon { animation: none !important; opacity: 0.6; } .mechanism-card__text--technical, .mechanism-card__text--simple, .mechanism-card__body, .mechanism-card__label-text, .brain-toggle-label__text { transition-duration: 0.01s !important; } .mechanism-card::after { display: none; } } .simplified-text[hidden] { display: none; } /* ── Charts & figures spécifiques substances ── */ .dual-line-chart, .deaths-chart-figure { margin: 20px 0; } .chart-source { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--text-mid); line-height: 1.7; margin-top: 8px; text-align: center; } .price-purity-chart, .deaths-chart { width: 100%; min-height: 200px; } /* ── Timeline effets ── */ .effect-timeline-container { background: var(--bg-card); border: 1px solid var(--border); padding: 18px 16px 14px; margin: 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .timeline-controls { display: flex; gap: 8px; margin-bottom: 12px; } .roa-btn { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--border-hi); background: transparent; color: var(--text-lo); transition: all 0.2s; } .roa-btn:hover { border-color: var(--accent-30); color: var(--text-mid); } .roa-btn.active { border-color: var(--accent-60); background: var(--accent-08); color: var(--accent); } /* ════════════════════════════════════════════════════════════ 8. TOGGLE — sections dépliables (carte dépliante) ════════════════════════════════════════════════════════════ */ .hidden-content { display: none; } .hidden-content.is-open { display: block; animation: fadeSlideIn 0.25s ease-out; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Carte wrapper ── */ .toggle-card { position: relative; margin-top: 20px; border: 1px solid var(--accent-30); transition: border-color 0.2s; } .toggle-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1px solid var(--accent-60); border-left: 1px solid var(--accent-60); pointer-events: none; z-index: 1; transition: width 0.2s, height 0.2s; } .toggle-card:hover { border-color: var(--accent-60); } .toggle-card:hover::before { width: 14px; height: 14px; } /* ── Bouton = en-tête de la carte ── */ .toggle-section-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 11px 16px; background: transparent; border: none; color: var(--accent-60); font-family: 'Share Tech Mono', monospace; font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; outline: none; position: relative; } .toggle-section-btn:hover { background: var(--accent-08); color: var(--accent); } .toggle-section-btn[aria-expanded="true"] { color: var(--accent); border-bottom: 1px solid var(--accent-20); background: var(--accent-08); } .toggle-section-btn .toggle-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; border: 1px solid var(--accent-30); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s; } .toggle-section-btn:hover .toggle-icon, .toggle-section-btn[aria-expanded="true"] .toggle-icon { border-color: var(--accent-60); } .toggle-section-btn .toggle-icon svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2; } .toggle-section-btn[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); } /* ── Corps de la carte (contenu déplié) ── */ .toggle-card .hidden-content.is-open { padding: 10px 10px 1px; } /* Masquer le h3 redondant (le bouton = titre) */ .toggle-card .hidden-content > h3:first-child { display: none; } /* ════════════════════════════════════════════════════════════ 9. TABLEAUX DOSAGE ════════════════════════════════════════════════════════════ */ .dosage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; margin: 4px 0 28px; } /* Tableaux à 4+ colonnes : toujours empilés */ .dosage-grid--wide { grid-template-columns: 1fr; } .dosage-card { background: var(--bg-card); border: 1px solid var(--border); padding: 22px 22px 18px; position: relative; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .dosage-card:hover { border-color: var(--accent-30); box-shadow: 0 4px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); transform: translateY(-2px); } .dosage-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 1px solid var(--accent-30); border-left: 1px solid var(--accent-30); transition: width 0.2s, height 0.2s, border-color 0.2s; } .dosage-card:hover::before { width: 16px; height: 16px; border-color: var(--accent-60); } .dosage-card::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1px solid var(--border-hi); border-right: 1px solid var(--border-hi); transition: width 0.2s, height 0.2s, border-color 0.2s; } .dosage-card:hover::after { width: 14px; height: 14px; border-color: var(--accent-30); } /* Séparateurs pleine largeur par palier (tableaux multi-voies via data-level sur ) */ .dosage-table tbody tr[data-level] { border-bottom: 1px solid var(--accent-30); } .dosage-table tbody tr[data-level]:last-child { border-bottom: none; } .duration-table tbody tr[data-level] { border-bottom: 1px solid var(--accent-30); } .duration-table tbody tr[data-level]:last-child { border-bottom: none; } .dosage-table, .duration-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; } .dosage-table thead tr, .duration-table thead tr { border-bottom: 1px solid var(--border); } .dosage-table th, .duration-table th { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-hi); padding: 0 0 9px; text-align: left; font-weight: 400; } .dosage-table th:last-child, .duration-table th:last-child { text-align: right; } .dosage-table tbody tr, .duration-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.); transition: background 0.15s; } .dosage-table tbody tr:last-child, .duration-table tbody tr:last-child { border-bottom: none; } .dosage-table tbody tr:hover, .duration-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } .dosage-table td, .duration-table td { font-family: 'Share Tech Mono', monospace; font-size: 13.5px; color: var(--text-mid); padding: 10px 0; vertical-align: middle; } .dosage-table td:first-child, .duration-table td:first-child { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); width: 45%; } .dosage-table td:last-child, .duration-table td:last-child { color: var(--text-hi); text-align: right; font-size: 14.5px; } /* ── Multi-voies (tableaux 4+ colonnes via .dosage-grid--wide) ── */ .dosage-grid--wide .dosage-table, .dosage-grid--wide .duration-table { table-layout: fixed; } .dosage-grid--wide .dosage-table th:first-child, .dosage-grid--wide .duration-table th:first-child { width: 28%; } .dosage-grid--wide .dosage-table th:not(:first-child), .dosage-grid--wide .duration-table th:not(:first-child) { text-align: center; border-left: 1px solid var(--accent-08); } .dosage-grid--wide .dosage-table th:last-child, .dosage-grid--wide .duration-table th:last-child { text-align: center; } .dosage-grid--wide .dosage-table td, .dosage-grid--wide .duration-table td { text-align: center; color: var(--text-hi); padding: 10px 8px; white-space: nowrap; } .dosage-grid--wide .dosage-table td:first-child, .dosage-grid--wide .duration-table td:first-child { text-align: left; color: var(--text-mid); padding-left: 0; width: auto; } .dosage-grid--wide .dosage-table td:not(:first-child), .dosage-grid--wide .duration-table td:not(:first-child) { border-left: 1px solid var(--accent-08); } /* Séparateurs pleine largeur (via data-level sur ) */ .dosage-table tbody tr[data-level], .duration-table tbody tr[data-level] { border-bottom: 1px solid var(--accent-30); } .dosage-table tbody tr[data-level]:last-child, .duration-table tbody tr[data-level]:last-child { border-bottom: none; } /* Seuils de couleur dosage — tables 2 colonnes */ .dosage-table tbody tr:nth-child(3) td:last-child { color: var(--amber); } .dosage-table tbody tr:nth-child(4) td:last-child { color: rgba(255, 59, 59, 0.85); } /* Seuils de couleur dosage — tables multi-voies */ .dosage-table tbody tr[data-level="strong"] td:not(:first-child) { color: var(--amber); } .dosage-table tbody tr[data-level="very-strong"] td:not(:first-child) { color: rgba(255, 59, 59, 0.85); } /* ════════════════════════════════════════════════════════════ 10. CALCULATEURS ════════════════════════════════════════════════════════════ */ .calculator-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; margin: 20px 0 28px; } .calculator { background: var(--bg-card); border: 1px solid var(--border); padding: 22px; position: relative; display: flex; flex-direction: column; transition: border-color 0.25s, box-shadow 0.25s; } .calculator:hover { border-color: var(--accent-30); box-shadow: 0 2px 16px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.04); } .calculator::before { content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 1px solid var(--accent-30); border-left: 1px solid var(--accent-30); transition: width 0.2s, height 0.2s, border-color 0.2s; } .calculator:hover::before { width: 16px; height: 16px; border-color: var(--accent-60); } .calc-content { flex: 1; display: flex; flex-direction: column; gap: 8px; } .calc-content .lead { font-size: 12px; color: var(--text-mid); line-height: 1.6; margin: 0; } .calc-content label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-lo); display: block; margin-top: 4px; } .calc-group { display: flex; align-items: stretch; border: 1px solid var(--border-hi); background: rgba(255, 255, 255, 0.015); transition: border-color 0.2s; } .calc-group:focus-within { border-color: var(--accent-30); box-shadow: 0 0 0 1px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08), 0 0 12px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); } .calc-input { background: transparent; border: none; outline: none; font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--text-hi); padding: 8px 12px; flex: 1; width: 100%; appearance: textfield; -moz-appearance: textfield; } .calc-input::-webkit-outer-spin-button, .calc-input::-webkit-inner-spin-button { -webkit-appearance: none; } .calc-input::placeholder { color: var(--text-lo); } select.calc-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(255,255,255,0.18)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; border: 1px solid var(--border-hi); } select.calc-input option { background: var(--bg-card); color: var(--text-hi); } .calc-unit { font-size: 9px; letter-spacing: 0.1em; color: var(--text-lo); padding: 0 12px; border-left: 1px solid var(--border); display: flex; align-items: center; flex-shrink: 0; } .calc-action { margin-top: 14px; } /* Bouton calculer */ .copy-btn { width: 100%; background: transparent; border: 1px solid var(--accent-30); color: var(--accent-60); font-family: 'Orbitron', monospace; font-weight: 700; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; padding: 10px 16px; position: relative; transition: background 0.2s, color 0.2s, border-color 0.2s; outline: none; } .copy-btn::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1px solid var(--accent-60); border-left: 1px solid var(--accent-60); } .copy-btn::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1px solid var(--accent-60); border-right: 1px solid var(--accent-60); } .copy-btn:hover { background: var(--accent-08); color: var(--accent); border-color: var(--accent-60); box-shadow: 0 0 14px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1); } .copy-btn:active { transform: translateY(1px); box-shadow: none; } /* Résultat */ .result-box { margin-top: 12px; padding: 12px 16px; background: rgba(255, 255, 255, 0.015); border: 1px solid var(--border); border-left: 2px solid var(--accent-30); font-size: 12px; line-height: 1.8; color: var(--text-mid); min-height: 46px; } .result-placeholder { font-size: 12px; color: var(--text-lo); letter-spacing: 0.08em; margin: 0; } /* ════════════════════════════════════════════════════════════ 10b. CALCULATEUR BAC (ALCOOLÉMIE) ════════════════════════════════════════════════════════════ */ /* ── Wrapper formulaire ── */ #bac-calculator { background: var(--bg-card); border: 1px solid var(--border); padding: 24px; position: relative; margin: 20px 0; } #bac-calculator::before { content: ''; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border-top: 1px solid var(--accent-30); border-left: 1px solid var(--accent-30); } #bac-calculator::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-bottom: 1px solid var(--border-hi); border-right: 1px solid var(--border-hi); } /* ── Fieldsets & legends ── */ .bac-fieldset { border: none; padding: 0; margin: 0 0 18px; } .bac-legend { font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-60); padding: 0 0 10px; margin-bottom: 14px; border-bottom: 1px solid var(--border); width: 100%; } /* ── Profile grid ── */ .bac-profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; } .bac-input-group { display: flex; flex-direction: column; gap: 5px; } .bac-label { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-lo); } .bac-input-wrap { display: flex; align-items: center; gap: 0; border: 1px solid var(--border-hi); transition: border-color 0.2s, box-shadow 0.2s; } .bac-input-wrap:focus-within { border-color: var(--accent-30); box-shadow: 0 0 0 1px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10), 0 0 10px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); } .bac-input-wrap input { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.03); border: none; color: var(--text-hi); font-family: 'Share Tech Mono', monospace; font-size: 13px; padding: 9px 10px; outline: none; -moz-appearance: textfield; } .bac-input-wrap input::-webkit-outer-spin-button, .bac-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; } .bac-input-wrap input::placeholder { color: var(--text-lo); font-size: 11px; } .bac-unit { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--text-lo); padding: 0 10px 0 4px; white-space: nowrap; user-select: none; } /* ── Toggle groups (sexe / état) ── */ .bac-toggles { display: flex; flex-wrap: wrap; gap: 14px; } .bac-toggle-group { display: flex; flex-direction: column; gap: 5px; flex: 1 1 180px; } /* ── Inputs standalone (number, text, time) ── */ #bac-calculator input[type="number"], #bac-calculator input[type="text"], #bac-calculator input[type="time"] { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-hi); color: var(--text-hi); font-family: 'Share Tech Mono', monospace; font-size: 13px; padding: 9px 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; -moz-appearance: textfield; } #bac-calculator input[type="number"]::-webkit-outer-spin-button, #bac-calculator input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } #bac-calculator input::placeholder { color: var(--text-lo); font-size: 11px; } #bac-calculator input[type="number"]:focus, #bac-calculator input[type="text"]:focus, #bac-calculator input[type="time"]:focus { border-color: var(--accent-30); box-shadow: 0 0 0 1px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10), 0 0 10px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); } /* Override border for inputs inside .bac-input-wrap (border on wrapper) */ .bac-input-wrap input[type="number"] { border: none; } /* ── Erreurs de champ ── */ .field-error { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--red); letter-spacing: 0.06em; margin-top: 3px; min-height: 14px; } #form-error { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--red); letter-spacing: 0.06em; padding: 8px 0 4px; } /* ── Boutons toggle genre / à jeun ── */ .btn-pair { display: flex; gap: 2px; } .gender-btn { flex: 1; background: transparent; border: 1px solid var(--border-hi); color: var(--text-lo); font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 12px; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .gender-btn:hover { border-color: var(--accent-30); color: var(--text-mid); background: var(--accent-08); } .gender-btn[aria-pressed="true"], .gender-btn.active { border-color: var(--accent-60); color: var(--accent); background: var(--accent-08); } /* ── Section consommations ── */ #consumptions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .consumption-row { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; grid-template-rows: auto auto; gap: 5px 8px; align-items: center; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); padding: 10px 12px; overflow: hidden; min-width: 0; } .consumption-row label { grid-column: 1 / 4; grid-row: 1; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-lo); white-space: nowrap; align-self: center; } .consumption-row .consumption-time { grid-column: 1; grid-row: 2; } .consumption-row .volume { grid-column: 2; grid-row: 2; } .consumption-row .percent { grid-column: 3; grid-row: 2; } .consumption-row .ingestion-control { grid-column: 4; grid-row: 2; min-width: 0; } /* ── Inputs dans la ligne de conso : ne pas déborder de la grille ── */ .consumption-row input[type="text"], .consumption-row input[type="number"] { width: 100%; min-width: 0; box-sizing: border-box; } .consumption-row input::placeholder { font-size: 10px; } /* ── Range slider (durée d'ingestion) ── */ .ingestion-control { display: flex; align-items: center; gap: 6px; } .ingestion-slider { -webkit-appearance: none; appearance: none; flex: 1; height: 3px; background: var(--border-hi); outline: none; cursor: pointer; accent-color: var(--accent); } .ingestion-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; background: var(--accent-60); border: 1px solid var(--accent-30); cursor: pointer; transition: background 0.2s, transform 0.15s; } .ingestion-slider::-webkit-slider-thumb:hover { background: var(--accent); transform: scale(1.2); } .ingestion-slider::-moz-range-thumb { width: 13px; height: 13px; background: var(--accent-60); border: 1px solid var(--accent-30); border-radius: 0; cursor: pointer; } .ingestion-value { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--accent-60); white-space: nowrap; min-width: 52px; } /* ── Bouton supprimer une conso ── */ .remove-wrapper { grid-column: 4; grid-row: 1; display: flex; align-items: center; justify-self: end; } .remove-consumption { background: transparent; border: 1px solid var(--red-30); color: rgba(255, 59, 59, 0.5); font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; padding: 6px 10px; white-space: nowrap; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .remove-consumption:hover { border-color: var(--red); color: var(--red); } /* ── Bouton ajouter une consommation ── */ .bac-add-btn { align-self: flex-start; background: transparent; border: 1px solid var(--border-hi); color: var(--text-mid); font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 16px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .bac-add-btn:hover { border-color: var(--accent-30); color: var(--accent-60); } /* ── Actions (calculer + réinitialiser) ── */ .bac-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; } /* ── Bouton calculer principal ── */ #calculate-btn { background: transparent; border: 1px solid var(--accent-30); color: var(--accent-60); font-family: 'Orbitron', monospace; font-weight: 700; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; padding: 12px 24px; position: relative; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; outline: none; } #calculate-btn::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1px solid var(--accent-60); border-left: 1px solid var(--accent-60); } #calculate-btn::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1px solid var(--accent-60); border-right: 1px solid var(--accent-60); } #calculate-btn:hover { background: var(--accent-08); color: var(--accent); border-color: var(--accent-60); box-shadow: 0 0 14px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12); } #calculate-btn:active { transform: translateY(1px); } /* ── Bouton réinitialiser ── */ .bac-reset-btn { background: transparent; border: 1px solid var(--border-hi); color: var(--text-lo); font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .bac-reset-btn:hover { border-color: var(--red-30); color: rgba(255, 59, 59, 0.7); } /* ── Résultats BAC ── */ #bac-results { background: var(--bg-card); border: 1px solid var(--border); border-left: 2px solid var(--accent-30); padding: 22px 24px 20px; margin-top: 18px; position: relative; } #bac-results h4 { font-family: 'Orbitron', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-60); margin-bottom: 14px; } #current-bac { font-family: 'Share Tech Mono', monospace; font-size: 15px; color: var(--text-hi); margin-bottom: 6px; } #legal-time { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--text-lo); } /* ── Alerte BAC ── */ .bac-alert { font-family: 'Share Tech Mono', monospace; font-size: 11.5px; letter-spacing: 0.04em; padding: 10px 14px; margin-top: 12px; border-left: 2px solid var(--accent-30); background: var(--accent-08); color: var(--text-mid); } /* ── Chart wrapper & overlay elements ── */ .bac-chart-wrap { position: relative; width: 100%; margin-top: 18px; } .bac-chart-wrap canvas { display: block; width: 100%; } #chart-tooltip { display: none; position: absolute; pointer-events: none; z-index: 10; background: rgba(15, 15, 20, 0.92); border: 1px solid var(--accent-30); color: var(--text-hi); font-family: 'Share Tech Mono', monospace; font-size: 11px; padding: 5px 9px; white-space: nowrap; } #chart-line { display: none; position: absolute; width: 1px; background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35); pointer-events: none; z-index: 5; } /* ── Checkbox calibration ── */ .bac-checkbox-label { display: flex; align-items: center; gap: 8px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--text-mid); cursor: pointer; } .bac-checkbox-label input[type="checkbox"] { accent-color: var(--accent); } /* ── Muted ── */ .muted { color: var(--text-lo); font-family: 'Share Tech Mono', monospace; font-size: 11px; } /* ── r-explainer (details/summary) ── */ .r-explainer { margin-top: 18px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.015); } .r-explainer > summary { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); padding: 12px 16px; cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s; } .r-explainer > summary::-webkit-details-marker { display: none; } .r-explainer > summary::before { content: '▶'; font-size: 8px; color: var(--accent-60); transition: transform 0.2s; flex-shrink: 0; } .r-explainer[open] > summary::before { transform: rotate(90deg); } .r-explainer > summary:hover { background: var(--accent-08); color: var(--accent-60); } .r-explainer-body { padding: 14px 18px 16px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.75; color: var(--text-mid); } .r-explainer-body p { margin-bottom: 8px; } .r-explainer-body ul { padding-left: 20px; } .r-explainer-body ul li { margin-bottom: 4px; } .r-stat { font-family: 'Share Tech Mono', monospace; color: var(--accent-60); } /* ── Section calibration ── */ .calibration { margin-top: 14px; padding: 14px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); } .cal-input { width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-hi); color: var(--text-hi); font-family: 'Share Tech Mono', monospace; font-size: 13px; padding: 9px 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; -moz-appearance: textfield; } .cal-input::-webkit-outer-spin-button, .cal-input::-webkit-inner-spin-button { -webkit-appearance: none; } .cal-input::placeholder { color: var(--text-lo); font-size: 11px; } .cal-input:focus { border-color: var(--accent-30); box-shadow: 0 0 0 1px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10); } .calibration h5 { font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-60); margin-bottom: 8px; } .calibration-fields { gap: 8px; } .calibration-actions-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; } .calibration-actions-row button { background: transparent; border: 1px solid var(--border-hi); color: var(--text-mid); font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 12px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .calibration-actions-row button:hover { border-color: var(--accent-30); color: var(--accent-60); } #calibration-result { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; color: var(--red); margin-top: 6px; } /* ── Table d'intoxication ── */ .intoxication-table { width: 100%; border-collapse: collapse; margin: 20px 0 14px; } .intoxication-table thead tr { border-bottom: 1px solid var(--border-hi); } .intoxication-table th { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-hi); padding: 0 0 10px; text-align: left; font-weight: 400; } .intoxication-table th:first-child { width: 36%; padding-right: 16px; } .intoxication-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; } .intoxication-table tbody tr:last-child { border-bottom: none; } .intoxication-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); } .intoxication-table td { font-family: 'Share Tech Mono', monospace; font-size: 12.5px; color: var(--text-mid); padding: 11px 0; vertical-align: middle; line-height: 1.5; } .intoxication-table td:first-child { padding-right: 16px; font-size: 13px; font-weight: 600; color: var(--text-hi); } /* Codage couleur progressif par niveau de danger */ .intoxication-table tbody tr:nth-child(1) td:first-child { color: var(--text-hi); } .intoxication-table tbody tr:nth-child(2) td:first-child { color: var(--accent-60); } .intoxication-table tbody tr:nth-child(3) td:first-child { color: var(--amber); } .intoxication-table tbody tr:nth-child(4) td:first-child { color: rgba(255, 140, 0, 0.9); } .intoxication-table tbody tr:nth-child(5) td:first-child { color: rgba(255, 59, 59, 0.85); } .intoxication-table tbody tr:nth-child(6) td:first-child { color: var(--red); } /* ── Responsive BAC calculator ── */ @media (max-width: 700px) { #bac-calculator { padding: 16px 14px; } .bac-profile-grid { grid-template-columns: 1fr 1fr; } .bac-profile-grid .bac-input-group:last-child { grid-column: 1 / -1; } /* 2 cols : [label] [×retirer] / [heure][vol][degré] en 3 cols / [slider] pleine largeur */ .consumption-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; } .consumption-row label { grid-column: 1; grid-row: 1; white-space: normal; } .remove-wrapper { grid-column: 2; grid-row: 1; justify-self: end; } .consumption-row .consumption-time { grid-column: 1 / -1; grid-row: 2; } .consumption-row .volume { grid-column: 1; grid-row: 3; } .consumption-row .percent { grid-column: 2; grid-row: 3; } .consumption-row .ingestion-control { grid-column: 1 / -1; grid-row: 4; } .intoxication-table th:first-child { width: 42%; } } @media (max-width: 480px) { .bac-profile-grid { grid-template-columns: 1fr; } .bac-toggles { flex-direction: column; } /* Colonne unique : chaque input sur sa propre ligne */ .consumption-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto auto; } .consumption-row label { grid-column: 1; grid-row: 1; white-space: normal; } .remove-wrapper { grid-column: 2; grid-row: 1; justify-self: end; } .consumption-row .consumption-time { grid-column: 1 / -1; grid-row: 2; } .consumption-row .volume { grid-column: 1 / -1; grid-row: 3; } .consumption-row .percent { grid-column: 1 / -1; grid-row: 4; } .consumption-row .ingestion-control { grid-column: 1 / -1; grid-row: 5; } .bac-actions { flex-direction: column; align-items: stretch; } #calculate-btn, .bac-reset-btn { width: 100%; text-align: center; } } /* ════════════════════════════════════════════════════════════ 11. QUIZ DUDIT ════════════════════════════════════════════════════════════ */ #quiz-intro { margin: 20px 0 16px; } #quiz-intro { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; gap: 12px; } #start-btn { background: transparent; border: 1px solid var(--accent-30); color: var(--accent-60); font-family: 'Orbitron', monospace; font-weight: 700; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; padding: 12px 24px; position: relative; transition: background 0.2s, color 0.2s, border-color 0.2s; outline: none; } #start-btn::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1px solid var(--accent-60); border-left: 1px solid var(--accent-60); } #start-btn::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1px solid var(--accent-60); border-right: 1px solid var(--accent-60); } #start-btn:hover { background: var(--accent-08); color: var(--accent); border-color: var(--accent-60); } #dudit-form { margin-top: 6px; } #dudit-form ol { list-style: none; } .question { display: none; background: var(--bg-card); border: 1px solid var(--border); border-left: 2px solid var(--accent-30); padding: 20px 24px; font-size: 13px; line-height: 1.8; color: var(--text-mid); } .question.active { display: block; } .question .progress { display: block; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-60); margin-bottom: 10px; } .question label { display: block; padding: 7px 14px; margin-top: 6px; background: rgba(255, 255, 255, 0.015); border: 1px solid rgba(255, 255, 255, 0.04); font-size: 12px; color: var(--text-mid); transition: background 0.15s, border-color 0.15s, color 0.15s; } .question label:hover { background: var(--accent-08); border-color: var(--accent-30); color: var(--text-hi); } .question input[type="radio"] { accent-color: var(--accent); margin-right: 10px; vertical-align: middle; } #dudit-result { display: none; margin-top: 16px; padding: 18px 22px; background: var(--bg-card); border: 1px solid var(--border); border-left: 2px solid var(--accent-30); font-size: 13px; line-height: 1.8; color: var(--text-mid); animation: dudit-result-in 0.25s ease both; } @keyframes dudit-result-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #dudit-result.show { opacity: 1; transform: translateY(0); } /* ════════════════════════════════════════════════════════════ 12. MÉLANGES — substance buttons & résultats ════════════════════════════════════════════════════════════ */ .mixtures-local { margin: 16px 0; } .substance-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; } .substance-buttons button { background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.658); font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 10px; transition: color 0.15s, border-color 0.15s, background 0.15s; outline: none; } .substance-buttons button:hover { color: var(--accent-85); border-color: var(--accent-30); background: var(--accent-08); } .substance-buttons button.active { color: var(--accent); border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5); background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.07); } #mixtures-results { margin-top: 16px; font-family: 'Exo 2', sans-serif; min-height: 56px; } #mixtures-results:empty { min-height: 0; margin-top: 0; } /* ════════════════════════════════════════════════════════════ 13. BIBLIOGRAPHIE ════════════════════════════════════════════════════════════ */ .biblio-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .biblio-item { display: block; font-family: 'Exo 2', sans-serif; font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, 0.55); padding: 10px 14px; border-left: 2px solid transparent; border-radius: 2px; transition: background 0.2s, border-color 0.2s; } .biblio-item:hover { background: rgba(255, 255, 255, 0.02); border-left-color: var(--accent-30); } /* Puce losange */ .biblio-item::before { content: ''; display: inline-block; width: 5px; height: 5px; border: 1px solid var(--accent-30); transform: rotate(45deg); margin-right: 10px; vertical-align: middle; } /* Auteurs */ .biblio-item strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; letter-spacing: 0.01em; } /* Titre de l'ouvrage */ .biblio-item em { color: rgba(255, 255, 255, 0.65); font-style: italic; } /* DOI */ .doi { display: inline-block; font-family: 'Exo 2', sans-serif; font-size: 11px; letter-spacing: 0.08em; color: var(--accent-85); margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15); border-radius: 2px; vertical-align: middle; } .doi a { color: inherit; text-decoration: none; transition: color 0.15s; } .doi a:hover { color: var(--accent-85); } /* Icônes DOI */ .doi a::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: middle; opacity: 0.5; transition: opacity 0.15s, transform 0.15s; } .doi a:hover::after { opacity: 1; transform: translateY(-1px); } /* Téléchargement — flèche vers le bas + barre */ .doi a.doi-download::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8.5M4.5 7.5 8 11l3.5-3.5M3 13.5h10'/%3E%3C/svg%3E") no-repeat center; } .doi-download:hover { opacity: 1; transform: translateY(-1px); } /* Lien externe — flèche haut-droit */ .doi a.doi-external::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h6.5V10M12 4 5.5 10.5'/%3E%3C/svg%3E") no-repeat center; } /* Copier la référence — clipboard */ .doi-copy { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: none; padding: 0; margin: 0; font: inherit; line-height: 1; display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: middle; cursor: pointer; opacity: 0.5; transition: opacity 0.15s, transform 0.15s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1'/%3E%3Cpath d='M10.5 5.5V3.5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2'/%3E%3C/svg%3E") no-repeat center; } .doi-copy:hover { opacity: 1; transform: translateY(-1px); } .doi-copy:focus-visible { outline: 2px solid var(--accent-30); outline-offset: 2px; border-radius: 2px; } /* État "copié" : checkmark */ .doi-copy--done { opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4.5 6.5 11.5 3 8'/%3E%3C/svg%3E") no-repeat center; } /* ════════════════════════════════════════════════════════════ 14. TOOLTIPS ════════════════════════════════════════════════════════════ */ .tooltip-term { color: var(--accent-85); border-bottom: 1px dashed var(--accent-60); cursor: help; position: relative; z-index: 50; } /* ── Liens internes automatiques (auto-links) ── */ .auto-link { color: var(--accent-85); text-decoration: underline; text-decoration-color: var(--accent-60); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease, text-shadow .15s ease; } .auto-link:hover, .auto-link:focus-visible { color: var(--accent); text-decoration-color: var(--accent); text-shadow: 0 0 8px var(--accent-30); } .tooltip-term strong, .tooltip-term em, .tooltip-term b, .subsection p .tooltip-term strong, .subsection p .tooltip-term em, .subsection p .tooltip-term b { color: inherit; } .tooltip-content { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 320px; max-width: 90vw; background: #0c0c1a; border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.2); padding: 14px 16px; font-family: 'Exo 2', sans-serif; font-size: 12px; line-height: 1.7; color: var(--text-mid); z-index: 300; pointer-events: auto; user-select: text; } /* Pont invisible pour combler le gap entre tooltip et terme */ .tooltip-content::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .tooltip-content::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5); border-left: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5); } .tooltip-term:hover .tooltip-content, .tooltip-term:focus .tooltip-content { display: block; } .tooltip-sep { display: block; height: 1px; background: rgba(255, 255, 255, 0.06); margin: 10px 0; } .tooltip-block { display: block; } /* Tooltip positionné en dessous (ajouté dynamiquement par JS) */ @media (min-width: 481px) { .tooltip-term.tooltip--below .tooltip-content { bottom: auto; top: calc(100% + 8px); } .tooltip-term.tooltip--below .tooltip-content::after { top: auto; bottom: 100%; } .tooltip-term.tooltip--below .tooltip-content::before { top: auto; bottom: -1px; border-top: none; border-bottom: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5); } } /* ════════════════════════════════════════════════════════════ 15. FOOTER ════════════════════════════════════════════════════════════ */ .page-footer { background: #0a0a10; border-top: 1px solid var(--accent-08); padding: 64px 0 32px; margin-top: var(--section-gap); position: relative; overflow: hidden; z-index: 10; } /* Scanlines subtiles */ .page-footer::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0px, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 1; } /* ── Grille principale ── */ .page-footer .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; position: relative; z-index: 2; } /* ── Colonnes ── */ .page-footer .footer-column { display: flex; flex-direction: column; gap: 10px; } .page-footer .footer-logo-area { gap: 6px; } /* ── Logo / marque ── */ .page-footer .footer-brand { font-family: 'Orbitron', monospace; font-weight: 900; font-size: 1.8rem; color: var(--accent); text-decoration: none; letter-spacing: 3px; text-shadow: 0 0 12px var(--accent-30); transition: text-shadow 0.3s ease; } .page-footer .footer-brand:hover { text-shadow: 0 0 24px var(--accent-60); } /* ── Mission ── */ .page-footer .footer-mission { font-size: 12px; color: var(--text-lo); line-height: 1.8; letter-spacing: 0.04em; max-width: 340px; } /* ── Titres colonnes (h3) ── */ .page-footer .footer-column h3 { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-60); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--accent-08); } /* ── Navigation ── */ .page-footer .footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .page-footer .footer-nav a { color: var(--text-lo); text-decoration: none; font-size: 11px; letter-spacing: 0.08em; transition: color 0.2s ease, transform 0.2s ease; display: flex; align-items: center; gap: 8px; } .page-footer .footer-nav a::before { content: '>'; font-family: 'Share Tech Mono', monospace; color: var(--accent-30); font-size: 10px; opacity: 0; transform: translateX(-8px); transition: all 0.2s ease; } .page-footer .footer-nav a:hover { color: var(--accent); transform: translateX(6px); } .page-footer .footer-nav a:hover::before { opacity: 1; transform: translateX(0); } /* ── Réseaux sociaux ── */ .page-footer .footer-socials-row { display: flex; gap: 10px; margin-top: 16px; } .page-footer .footer-social-link { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none; } .page-footer .footer-social-link::after { display: none !important; content: none !important; } .page-footer .footer-social-link img { width: 18px; height: 18px; opacity: 0.5; filter: invert(1); transition: opacity 0.2s ease, filter 0.2s ease; } .page-footer .footer-social-link:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 16px var(--accent-30); transform: translateY(-3px); } .page-footer .footer-social-link:hover img { opacity: 1; filter: brightness(0); } /* ── Status box (Système) ── */ .page-footer .footer-status-box { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-hi); padding: 16px; border-radius: 4px; margin-top: 8px; } .page-footer .status-header { display: flex; align-items: center; gap: 8px; font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 0.15em; color: var(--accent-60); margin-bottom: 8px; } .page-footer .status-indicator { width: 6px; height: 6px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 8px #00ff88; animation: statusPulse 2s infinite; } @keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.2); } } .page-footer .status-info { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: rgba(255, 255, 255, 0.3); line-height: 1.6; } .page-footer .footer-association { font-size: 10px; color: rgba(255, 255, 255, 0.25); line-height: 1.6; margin-top: 12px; letter-spacing: 0.06em; } /* ── Barre inférieure ── */ .page-footer .footer-bottom-bar { max-width: 1200px; margin: 40px auto 0; padding: 20px 40px 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; } .page-footer .footer-copyright { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: rgba(255, 255, 255, 0.3); text-transform: uppercase; letter-spacing: 0.12em; } .page-footer .footer-legal-links { display: flex; gap: 24px; } .page-footer .footer-legal-links a { color: rgba(255, 255, 255, 0.3); text-decoration: none; font-size: 10px; letter-spacing: 0.1em; transition: color 0.2s ease; } .page-footer .footer-legal-links a:hover { color: var(--accent-60); } /* ════════════════════════════════════════════════════════════ 15b. RDR PANEL — Réduction des Risques (opioïdes + autres) Usage :

…

Groupes : .rdr-panel__group--prevention | --overdose Réutilisable sur toutes les pages opioïdes. ════════════════════════════════════════════════════════════ */ .rdr-panel { margin-top: var(--subsection-gap); border: 1px solid var(--border-hi); border-radius: 8px; overflow: hidden; background: var(--bg-card); } .rdr-panel__header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08); border-bottom: 1px solid var(--border-hi); font-family: 'Orbitron', monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-85); } .rdr-panel__header svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); } .rdr-panel__body { display: grid; grid-template-columns: 1fr 1fr; } .rdr-panel__group { padding: 22px 24px; border-right: 1px solid var(--border); } .rdr-panel__group:last-child { border-right: none; } .rdr-panel__group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .rdr-panel__group--prevention .rdr-panel__group-title { color: var(--accent-85); } .rdr-panel__group--overdose .rdr-panel__group-title { color: var(--red); } .rdr-panel__group-title svg { width: 13px; height: 13px; flex-shrink: 0; } .rdr-panel__list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .rdr-panel__list > li { position: relative; padding: 8px 12px 8px 30px; font-size: 0.83rem; line-height: 1.55; color: var(--text-mid); border-radius: 4px; transition: background 0.18s; } .rdr-panel__list > li:hover { background: rgba(255, 255, 255, 0.025); } /* Bullet */ .rdr-panel__list > li::before { content: ''; position: absolute; left: 12px; top: 14px; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .rdr-panel__group--prevention .rdr-panel__list > li::before { background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.55); } .rdr-panel__group--overdose .rdr-panel__list > li::before { background: rgba(255, 59, 59, 0.55); } .rdr-panel__group--overdose .rdr-panel__list > li strong { color: rgb(255, 155, 155); font-weight: 600; } /* Note de bas de groupe */ .rdr-panel__note { margin-top: 12px; padding: 9px 14px; border-radius: 5px; background: rgba(255, 59, 59, 0.06); border: 1px solid rgba(255, 59, 59, 0.14); font-size: 0.77rem; line-height: 1.5; color: var(--text-mid); } .rdr-panel__note strong { color: rgb(255, 155, 155); } /* ════════════════════════════════════════════════════════════ 15c. RISK-CHECKLIST — Liste de symptômes / risques typés Usage :

… Variantes item : .is-standard | .is-severe | .is-danger ════════════════════════════════════════════════════════════ */ .risk-checklist { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 1.2rem 0; } .risk-checklist > li { position: relative; padding: 11px 16px 11px 48px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35); font-size: 0.83rem; line-height: 1.55; color: var(--text-mid); transition: background 0.18s, border-left-color 0.18s; } .risk-checklist > li:first-child { border-radius: 5px 5px 0 0; } .risk-checklist > li:last-child { border-radius: 0 0 5px 5px; } .risk-checklist > li:hover { background: var(--bg-card2); } /* Indicateur coloré */ .risk-checklist > li::before { content: ''; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5); flex-shrink: 0; } .risk-checklist > li strong { display: block; font-size: 0.84rem; font-weight: 600; color: var(--text-hi); margin-bottom: 1px; } /* Niveau sévère */ .risk-checklist > li.is-severe { border-left-color: rgba(255, 155, 40, 0.6); } .risk-checklist > li.is-severe::before { background: rgba(255, 155, 40, 0.7); } /* Niveau danger */ .risk-checklist > li.is-danger { border-left-color: var(--red); background: rgba(255, 59, 59, 0.03); } .risk-checklist > li.is-danger::before { background: var(--red); } .risk-checklist > li.is-danger strong { color: rgb(255, 140, 140); } /* ════════════════════════════════════════════════════════════ 15d. MIXTURE-LIST — Interactions médicamenteuses stylisées Usage :

… Variantes item : .is-extreme | .is-high | .is-moderate ════════════════════════════════════════════════════════════ */ .mixture-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 1.2rem 0; } .mixture-list > li { display: grid; grid-template-columns: 160px 1fr; border: 1px solid var(--border-hi); border-radius: 6px; overflow: hidden; transition: border-color 0.18s; } .mixture-list > li:hover { border-color: rgba(255, 255, 255, 0.12); } .mixture-list__substance { padding: 14px 16px; background: rgba(255, 255, 255, 0.03); border-right: 1px solid var(--border); font-size: 0.82rem; font-weight: 700; color: var(--text-hi); display: flex; align-items: center; } .mixture-list__info { padding: 13px 16px; display: flex; flex-direction: column; gap: 5px; } .mixture-list__severity { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 2px 8px; border-radius: 3px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .mixture-list__severity::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } /* Niveau extrême (rouge) */ .mixture-list > li.is-extreme { border-left: 3px solid rgba(255, 59, 59, 0.7); } .mixture-list > li.is-extreme .mixture-list__severity { background: rgba(255, 59, 59, 0.12); color: #ff9090; } .mixture-list > li.is-extreme .mixture-list__severity::before { background: #ff5f5f; } /* Niveau élevé (orange) */ .mixture-list > li.is-high { border-left: 3px solid rgba(255, 145, 40, 0.6); } .mixture-list > li.is-high .mixture-list__severity { background: rgba(255, 145, 40, 0.12); color: #ffaa60; } .mixture-list > li.is-high .mixture-list__severity::before { background: #ff9040; } /* Niveau modéré (jaune) */ .mixture-list > li.is-moderate { border-left: 3px solid rgba(255, 210, 40, 0.5); } .mixture-list > li.is-moderate .mixture-list__severity { background: rgba(255, 210, 40, 0.10); color: #ffd060; } .mixture-list > li.is-moderate .mixture-list__severity::before { background: #ffd040; } /* Niveau neutre/bas (vert) */ .mixture-list > li.is-low { border-left: 3px solid rgba(40, 255, 100, 0.4); } .mixture-list > li.is-low .mixture-list__severity { background: rgba(40, 255, 100, 0.08); color: #70ff90; } .mixture-list > li.is-low .mixture-list__severity::before { background: #50ff70; } .mixture-list__desc { font-size: 0.81rem; line-height: 1.5; color: var(--text-mid); } .mixture-list__examples { font-size: 0.74rem; color: var(--text-lo); font-style: italic; } /* ════════════════════════════════════════════════════════════ 16. RESPONSIVE ════════════════════════════════════════════════════════════ */ /* ── Tablette (768–1024px) ── */ @media (max-width: 1024px) { .container { padding: 0 40px 120px; } .breadcrumb { margin: 0 -40px; padding: 0 40px; } .nav-button { width: 48px; height: 48px; } .nav-button svg { width: 20px; height: 20px; } .scroll-to-top { right: 0; } .back-to-index { left: 0; } .drug-title-main, .drug-title-name { font-size: clamp(18px, 2.5vw, 30px); } .drug-title-legal-badge { flex-wrap: wrap; } .drug-title-legal-law { border-left: 1px solid rgba(255, 59, 59, 0.18); border-top: none; } /* Permettre le wrap du texte de loi */ .drug-title-legal-law-ref { white-space: normal; line-height: 1.5; } /* Footer : 2 colonnes sur tablette */ .page-footer .footer-container { grid-template-columns: 1.5fr 1fr; gap: 36px; } } /* ── Intermédiaire (768px) ── */ @media (max-width: 768px) { .container { padding: 0 30px 100px; } .breadcrumb { margin: 0 -30px; padding: 0 30px; } /* Nav : réduire l'espacement */ .header-container { padding: 0 20px; gap: 20px; } .nav-link { padding: 6px 10px; font-size: 8px; } /* Sidebar plus compacte */ .nav-button { width: 42px; height: 42px; } .nav-button svg { width: 18px; height: 18px; } .btn-index { font-size: 5px; } /* Scroll/Back : taille réduite */ .scroll-to-top, .back-to-index { width: 50px; height: 50px; } .scroll-to-top svg, .back-to-index svg { width: 15px; height: 15px; } /* Pharmacologie : adapt grille */ .pharma-nt-grid { grid-template-columns: 1fr; } .pharma-extras-grid { grid-template-columns: repeat(2, 1fr); } /* Calculateurs : padding adapté */ .calculator { padding: 18px; } /* Dosage cards : padding adapté */ .dosage-card { padding: 18px 18px 14px; } /* Timeline : overflow pour petits écrans */ .effect-timeline-container { padding: 16px 12px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .effect-timeline-svg { min-width: 500px; } /* Tooltips : empêcher le débordement — left/right clampés par JS */ .tooltip-content { max-width: 85vw; } /* RDR Panel : grille 2 → 1 colonne */ .rdr-panel__body { grid-template-columns: 1fr; } .rdr-panel__group { border-right: none; border-bottom: 1px solid var(--border); } .rdr-panel__group:last-child { border-bottom: none; } /* Mixture list : grille → pile */ .mixture-list > li { grid-template-columns: 1fr; } .mixture-list__substance { border-right: none; border-bottom: 1px solid var(--border); padding: 10px 16px 8px; } } /* ── Mobile (640px et moins) ── */ @media (max-width: 640px) { :root { --section-gap: 56px; --subsection-gap: 32px; } .container { padding: 0 20px 80px; } .breadcrumb { margin: 0 -20px; padding: 0 20px; } .header-container { padding: 0 16px; gap: 12px; } .nav-label { display: none; } .nav-link { padding: 8px; } .site-logo { height: 24px; } /* Sidebar masquée sur mobile */ .button-panel { display: none; } /* Scroll/Back : encore plus compact */ .scroll-to-top, .back-to-index { width: 44px; height: 44px; bottom: 16px; } .scroll-to-top svg, .back-to-index svg { width: 14px; height: 14px; } /* Titre substance */ .drug-title-component { flex-direction: column; gap: 12px; padding: 32px 0 24px; } .drug-title-vbar { display: none; } .drug-title-main, .drug-title-name { font-size: 20px; letter-spacing: 1.5px; line-height: 1.25; } .drug-title-body { font-size: 13px; } /* Badge légal en colonne */ .drug-title-legal-badge { flex-direction: column; align-items: stretch; } .drug-title-legal-status { justify-content: center; } .drug-title-legal-sep { width: 100%; height: 1px; } .drug-title-legal-law { border-left: none; border-top: 1px solid rgba(255, 59, 59, 0.18); } .drug-title-legal-law-ref { white-space: normal; line-height: 1.5; font-size: 8px; } /* Summary bar : structure visuelle en wrap */ .drug-summary-bar { flex-wrap: wrap; border: 1px solid var(--accent-30); } .summary-item { min-width: 0; flex: 1 1 calc(33.333% - 1px); padding: 12px 8px; border-bottom: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08); } .summary-item:nth-last-child(-n+3) { border-bottom: none; } .summary-sep { display: none; } .summary-label { font-size: 7px; letter-spacing: 0.22em; } .summary-value { font-size: 11px; } /* Effets tags : permettre le wrap des noms longs */ .effect-tag .tag-name { white-space: normal; font-size: 12px; } .effect-tag { padding: 4px 8px; } .effect-tag.is-open { padding: 12px 14px 14px; } .effect-tag.is-open .tag-desc { font-size: 12px; line-height: 1.75; } /* Grilles en colonne */ .dosage-grid, .calculator-container, .factor-grid { grid-template-columns: 1fr; } /* Dosage/duration tables — multi-voies responsive */ .dosage-grid--wide .dosage-table, .dosage-grid--wide .duration-table { table-layout: auto; } .dosage-grid--wide .dosage-table td, .dosage-grid--wide .duration-table td { white-space: normal; font-size: 12px; padding: 8px 6px; } .dosage-grid--wide .dosage-table th, .dosage-grid--wide .duration-table th { font-size: 10px; letter-spacing: 0.12em; padding: 0 6px 7px; } .dosage-grid--wide .dosage-table td:first-child, .dosage-grid--wide .duration-table td:first-child { font-size: 10px; padding-left: 0; } .dosage-grid--wide .dosage-table th:first-child, .dosage-grid--wide .duration-table th:first-child { width: auto; } /* Timeline SVG : scroll horizontal */ .effect-timeline-container { padding: 14px 10px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .effect-timeline-svg { min-width: 480px; } /* Pharmacologie grilles : 1 colonne */ .pharma-nt-grid, .pharma-extras-grid { grid-template-columns: 1fr; } .pharma-nt-card { padding: 18px 16px 14px; } .pharma-extra-card { padding: 14px 16px 12px; } /* Calculateurs : padding réduit */ .calculator { padding: 16px; } .calc-content .lead { font-size: 11px; } /* Quiz : padding réduit */ .question { padding: 16px 18px; font-size: 12px; } /* Mélanges : boutons plus petits */ .substance-buttons button { font-size: 9px; padding: 4px 8px; letter-spacing: 0.1em; } /* Témoignage */ .temoignage blockquote { padding: 16px 16px 14px 20px; } .temoignage blockquote p { font-size: 0.85rem; } /* Citation scientifique */ .citation-scientifique blockquote { padding: 14px 16px 12px; } .citation-scientifique blockquote p { font-size: 0.85rem; } /* H2 sections */ .section > h2 { font-size: clamp(16px, 4.5vw, 22px); } /* H3 subsections */ .subsection > h3 { font-size: clamp(9px, 2.8vw, 12px); } /* Paragraphes : taille réduite */ .subsection p, .section > p { font-size: 14.5px; line-height: 1.85; } /* Vidéos */ .video-carousel-wrapper { gap: 4px; } .video-carousel-btn { width: 28px; height: 28px; } .video-carousel-btn svg { width: 10px; height: 10px; } /* Toggle cards */ .toggle-section-btn { font-size: 12px; padding: 10px 12px; letter-spacing: 0.1em; } /* Biblio */ .biblio-item { font-size: 11px; padding: 8px 10px; } .doi { font-size: 10px; margin-left: 0; margin-top: 4px; display: block; } /* Footer en colonne */ .page-footer { padding: 48px 0 24px; } .page-footer .footer-container { grid-template-columns: 1fr; gap: 32px; padding: 0 20px; } .page-footer .footer-bottom-bar { flex-direction: column; gap: 12px; text-align: center; padding: 20px 20px 0; } .page-footer .footer-legal-links { flex-direction: column; gap: 10px; } .page-footer .footer-rdr-notice { padding: 0 20px; } } /* ── Petit mobile (480px et moins) ── */ @media (max-width: 480px) { /* Titre encore plus compact */ .drug-title-main, .drug-title-name { font-size: 18px; letter-spacing: 1px; } .drug-title-supertitle-num, .drug-title-supertitle-label { font-size: 8px; } /* Summary : 2 colonnes au lieu de 3 */ .summary-item { flex: 1 1 calc(50% - 1px); } .summary-item:nth-last-child(-n+3) { border-bottom: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08); } .summary-item:nth-last-child(-n+2) { border-bottom: none; } /* Timeline encore plus compacte */ .effect-timeline-svg { min-width: 420px; } /* Tooltips : pleine largeur */ .tooltip-content { position: fixed; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-width: 100%; z-index: 500; border: none; border-top: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3); padding: 16px 20px; } /* Breadcrumb plus petit */ .breadcrumb { font-size: 9px; letter-spacing: 0.08em; } .breadcrumb .sep { margin: 0 6px; } /* Dosage note */ .dosage-note { font-size: 9px !important; } /* Tables dosage/durée multi-voies : ultra-compact */ .dosage-grid--wide .dosage-table td, .dosage-grid--wide .duration-table td { font-size: 11px; padding: 7px 4px; } .dosage-grid--wide .dosage-table th, .dosage-grid--wide .duration-table th { font-size: 9px; letter-spacing: 0.08em; padding: 0 4px 6px; } .dosage-grid--wide .dosage-table td:first-child, .dosage-grid--wide .duration-table td:first-child { font-size: 9px; } /* Result box */ .result-box { padding: 10px 12px; font-size: 11px; } } /* ── Très petit mobile (380px et moins) ── */ @media (max-width: 380px) { .container { padding: 0 12px 60px; } .breadcrumb { margin: 0 -12px; padding: 0 12px; } .drug-title-main, .drug-title-name { font-size: 16px; letter-spacing: 0.5px; } .drug-title-body { font-size: 12px; } .section > h2 { font-size: 15px; } .subsection > h3 { font-size: 9px; } .subsection p, .section > p { font-size: 13.5px; line-height: 1.8; } /* Summary : 1 colonne */ .summary-item { flex: 1 1 100%; } /* Effet tags */ .effect-tag .tag-name { font-size: 11px; } /* Toggle */ .toggle-section-btn { font-size: 10px; padding: 8px 10px; } /* Vidéo featured */ .video-featured::before { width: 8px; height: 8px; } } /* ════════════════════════════════════════════════════════════ 17. UTILITAIRES ════════════════════════════════════════════════════════════ */ /* Classe pour cacher visuellement mais garder accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Animation d'entrée générique */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Sélection */ ::selection { background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3); color: white; } /* ════════════════════════════════════════════════════════════ VIDÉOS ════════════════════════════════════════════════════════════ */ /* Vidéo principale intégrée */ .video-featured { position: relative; border: 1px solid var(--border); background: #000; aspect-ratio: 16 / 9; width: 100%; transition: border-color 0.25s, box-shadow 0.25s; } .video-featured:hover { border-color: var(--accent-30); box-shadow: 0 4px 24px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08); } .video-featured::before { content: ''; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border-top: 1px solid var(--accent-60); border-left: 1px solid var(--accent-60); z-index: 1; transition: width 0.2s, height 0.2s; } .video-featured:hover::before { width: 18px; height: 18px; } .video-featured::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-bottom: 1px solid var(--border-hi); border-right: 1px solid var(--border-hi); z-index: 1; transition: width 0.2s, height 0.2s, border-color 0.2s; } .video-featured:hover::after { width: 14px; height: 14px; border-color: var(--accent-30); } .video-featured iframe { width: 100%; height: 100%; display: block; border: none; position: relative; z-index: 0; } .video-featured-overlay { position: absolute; inset: 0; z-index: 2; cursor: pointer; } .video-featured.is-active .video-featured-overlay { display: none; } /* Carousel de vidéos */ .video-carousel-label { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-60); margin: 24px 0 10px; } .video-carousel-wrapper { position: relative; display: flex; align-items: center; gap: 8px; } .video-carousel-btn { flex-shrink: 0; width: 32px; height: 32px; background: var(--bg-card); border: 1px solid var(--border); color: var(--accent-60); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; position: relative; outline: none; } .video-carousel-btn:hover { border-color: var(--accent-60); color: var(--accent); background: var(--accent-08); } .video-carousel-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .video-carousel-track { flex: 1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.25) transparent; } .video-carousel-track::-webkit-scrollbar { height: 3px; } .video-carousel-track::-webkit-scrollbar-track { background: transparent; } .video-carousel-track::-webkit-scrollbar-thumb { background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3); border-radius: 2px; } .video-card { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; position: relative; border: 1px solid var(--border); background: var(--bg-card); transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .video-card:hover { border-color: var(--accent-30); box-shadow: 0 4px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.07); transform: translateY(-2px); } .video-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 1px solid var(--accent-30); border-left: 1px solid var(--accent-30); z-index: 1; transition: width 0.2s, height 0.2s, border-color 0.2s; } .video-card:hover::before { width: 16px; height: 16px; border-color: var(--accent-60); } .video-card::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 6px; height: 6px; border-bottom: 1px solid var(--border-hi); border-right: 1px solid var(--border-hi); z-index: 1; transition: width 0.2s, height 0.2s, border-color 0.2s; } .video-card:hover::after { width: 12px; height: 12px; border-color: var(--accent-30); } .video-card-embed { aspect-ratio: 16 / 9; width: 100%; position: relative; } .video-card-embed iframe { width: 100%; height: 100%; display: block; border: none; } .video-card-embed::after { content: ''; position: absolute; inset: 0; z-index: 2; cursor: pointer; } .video-card.is-active .video-card-embed::after { display: none; } @media (max-width: 600px) { .video-card { flex: 0 0 100%; } } /* Scrollbar custom (Webkit) */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.4); } /* Firefox scrollbar */ html { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.2) var(--bg); } /* ════════════════════════════════════════════════════════════ PANNEAU CHERCHEUR·EUSE — Side panel au clic/tap Ajouter à la fin de style-drogues-v2.css ════════════════════════════════════════════════════════════ */ /* ── Trigger inline (nom cliquable dans le texte) ── */ .researcher-trigger { color: var(--accent-60); border-bottom: 1px dashed var(--accent-30); text-decoration: none; cursor: pointer; position: relative; transition: color 0.2s, border-color 0.2s; } .researcher-trigger:hover { color: var(--accent); border-color: var(--accent-60); } .researcher-trigger::before { content: ''; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; border: 1px solid var(--accent-30); transform: translateY(-50%) rotate(45deg); opacity: 0; transition: opacity 0.2s; } .researcher-trigger:hover::before { opacity: 1; } /* ── Overlay assombrissant ── */ .researcher-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 899; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .researcher-overlay.is-open { opacity: 1; pointer-events: auto; } /* ── Panneau latéral ── */ .researcher-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 90vw; background: var(--bg-card); border-left: 1px solid var(--accent-30); z-index: 900; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.2) transparent; } .researcher-panel.is-open { transform: translateX(0); } /* Coin décoratif haut-gauche */ .researcher-panel::before { content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 1px solid var(--accent-60); border-left: 1px solid var(--accent-60); z-index: 2; pointer-events: none; } /* ── Bouton fermer ── */ .rp-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; background: transparent; border: 1px solid var(--border-hi); color: var(--text-lo); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: color 0.2s, border-color 0.2s, background 0.2s; font-family: 'Share Tech Mono', monospace; font-size: 16px; line-height: 1; } .rp-close:hover { color: var(--accent-60); border-color: var(--accent-30); background: var(--accent-08); } /* ── En-tête label ── */ .rp-header-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-60); padding: 18px 22px 12px; border-bottom: 1px solid var(--border); } /* ── Zone avatar ── */ .rp-avatar-zone { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 22px 0; } .rp-avatar { width: 88px; height: 88px; border: 1px solid var(--accent-30); object-fit: cover; position: relative; display: block; } /* Coins déco sur l'avatar — via un wrapper */ .rp-avatar-wrap { position: relative; width: 88px; height: 88px; } .rp-avatar-wrap::before { content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); z-index: 1; } .rp-avatar-wrap::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 5px; height: 5px; border-bottom: 1px solid var(--border-hi); border-right: 1px solid var(--border-hi); z-index: 1; } /* Fallback initiales si pas d'image */ .rp-avatar-fallback { width: 88px; height: 88px; border: 1px solid var(--accent-30); background: var(--accent-08); display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', monospace; font-size: 22px; font-weight: 700; color: var(--accent-60); } .rp-name { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--text-hi); text-align: center; } .rp-role { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--text-lo); text-align: center; line-height: 1.55; } .rp-role em { color: var(--accent-60); font-style: normal; } /* ── Séparateur ── */ .rp-divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--accent-30), transparent); margin: 20px 0; } /* ── Champs d'info ── */ .rp-fields { padding: 0 22px; display: flex; flex-direction: column; gap: 16px; } .rp-field-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-30); margin-bottom: 5px; } .rp-field-value { font-family: 'Exo 2', sans-serif; font-size: 13px; color: var(--text-mid); line-height: 1.65; } /* ── Section publications ── */ .rp-publications { padding: 0 22px 28px; } .rp-pub-heading { display: flex; align-items: center; gap: 8px; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-60); margin-bottom: 14px; } .rp-pub-heading::before { content: ''; display: block; width: 14px; height: 1px; background: var(--accent-30); flex-shrink: 0; } .rp-pub-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .rp-pub-item { background: var(--bg-card2); border: 1px solid var(--border); padding: 12px 14px; position: relative; transition: border-color 0.25s, box-shadow 0.25s; } .rp-pub-item:hover { border-color: var(--accent-30); box-shadow: 0 2px 16px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06); } /* Coin déco sur chaque pub */ .rp-pub-item::before { content: ''; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; border-top: 1px solid var(--accent-30); border-left: 1px solid var(--accent-30); transition: width 0.2s, height 0.2s; } .rp-pub-item:hover::before { width: 10px; height: 10px; } .rp-pub-year { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: var(--accent-30); margin-bottom: 4px; display: block; } .rp-pub-title { font-family: 'Exo 2', sans-serif; font-size: 12.5px; font-style: italic; line-height: 1.65; color: var(--text-mid); } .rp-pub-journal { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--text-lo); margin-top: 4px; display: block; } .rp-pub-link { display: inline-flex; align-items: center; gap: 4px; font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.08em; color: var(--accent-60); margin-top: 6px; border-bottom: 1px solid var(--accent-30); transition: color 0.2s, border-color 0.2s; } .rp-pub-link:hover { color: var(--accent); border-color: var(--accent-60); } /* ── Lien externe (site perso) ── */ .rp-external-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 22px 24px; padding: 8px 14px; border: 1px solid var(--accent-30); background: var(--accent-08); font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-60); text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; position: relative; } .rp-external-link:hover { color: var(--accent); border-color: var(--accent-60); background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12); } .rp-external-link::before { content: ''; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; border-top: 1px solid var(--accent-60); border-left: 1px solid var(--accent-60); } .rp-external-link svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2; fill: none; } /* ── Responsive ── */ @media (max-width: 600px) { .researcher-panel { width: 100vw; max-width: 100vw; } } /* ════════════════════════════════════════════════════════════ 20. Dossiers crossref Encarts pour renvoi vers pages dossiers pour approfondir. ════════════════════════════════════════════════════════════ */ .dossier-crossref { background: var(--bg-card); border: 1px solid var(--border); padding: 24px; margin: 28px 0; position: relative; transition: border-color 0.3s, box-shadow 0.3s; } /* ── Corners : haut-gauche + bas-droite via ::before / ::after ── */ .dossier-crossref::before, .dossier-crossref::after { content: ''; position: absolute; width: 12px; height: 12px; transition: width 0.3s, height 0.3s, border-color 0.3s; } .dossier-crossref::before { top: -1px; left: -1px; border-top: 1.5px solid color-mix(in srgb, var(--xref-color) 40%, transparent); border-left: 1.5px solid color-mix(in srgb, var(--xref-color) 40%, transparent); } .dossier-crossref::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid color-mix(in srgb, var(--xref-color) 40%, transparent); border-right: 1.5px solid color-mix(in srgb, var(--xref-color) 40%, transparent); } /* ── Corners : haut-droite + bas-gauche via spans ── */ .dossier-crossref__corner-tr, .dossier-crossref__corner-bl { position: absolute; width: 12px; height: 12px; transition: width 0.3s, height 0.3s, border-color 0.3s; } .dossier-crossref__corner-tr { top: -1px; right: -1px; border-top: 1.5px solid color-mix(in srgb, var(--xref-color) 25%, transparent); border-right: 1.5px solid color-mix(in srgb, var(--xref-color) 25%, transparent); } .dossier-crossref__corner-bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid color-mix(in srgb, var(--xref-color) 25%, transparent); border-left: 1.5px solid color-mix(in srgb, var(--xref-color) 25%, transparent); } /* ── Hover global ── */ .dossier-crossref:hover { border-color: color-mix(in srgb, var(--xref-color) 18%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--xref-color) 4%, transparent); } .dossier-crossref:hover::before, .dossier-crossref:hover::after { width: 22px; height: 22px; border-color: color-mix(in srgb, var(--xref-color) 60%, transparent); } .dossier-crossref:hover .dossier-crossref__corner-tr, .dossier-crossref:hover .dossier-crossref__corner-bl { width: 22px; height: 22px; border-color: color-mix(in srgb, var(--xref-color) 45%, transparent); } /* ── Header : icône + titre + scan path ── */ .dossier-crossref__header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); position: relative; } .dossier-crossref__header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 30px; height: 1px; background: var(--xref-color); opacity: 0.5; } /* Icône */ .dossier-crossref__icon svg { display: block; width: 32px; height: 32px; color: var(--xref-color); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--xref-color) 30%, transparent)); flex-shrink: 0; } .dossier-crossref:hover .dossier-crossref__icon svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--xref-color) 50%, transparent)); } /* Textes header */ .dossier-crossref__heading { flex: 1; min-width: 0; } .dossier-crossref__category { font-family: 'Orbitron', monospace; font-size: 7.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--xref-color); opacity: 0.6; margin: 0 0 2px; } .dossier-crossref__title { font-family: 'Exo 2', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-hi); line-height: 1.3; margin: 0; /* Reset héritages possibles */ letter-spacing: normal; text-transform: none; background: none; -webkit-text-fill-color: var(--text-hi); border: none; padding: 0; } .dossier-crossref__title::before, .dossier-crossref__title::after { display: none; } /* Scan path décoratif */ .dossier-crossref__scan { font-family: 'Share Tech Mono', monospace; font-size: 8px; color: rgba(255, 255, 255, 0.12); letter-spacing: 0.15em; text-transform: uppercase; margin-left: auto; flex-shrink: 0; white-space: nowrap; } /* ── Description ── */ .dossier-crossref__desc { font-family: 'Exo 2', sans-serif; font-size: 12.5px; line-height: 1.7; color: var(--text-lo); margin: 0 0 14px; } /* ── Footer : data + CTA ── */ .dossier-crossref__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .dossier-crossref__data { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: rgba(255, 255, 255, 0.15); letter-spacing: 0.1em; } .dossier-crossref__cta { display: inline-flex; align-items: center; gap: 8px; font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; font-weight: 700; color: var(--bg, #04040a); background: var(--xref-color); text-decoration: none; padding: 6px 16px; border-radius: 2px; transition: filter 0.25s; } .dossier-crossref__cta::after { content: '→'; transition: transform 0.25s; } .dossier-crossref__cta:hover { filter: brightness(1.15); color: #fff; } .dossier-crossref__cta:hover::after { transform: translateX(3px); } /* ── Crossref: gardes de spécificité ── Empêche .subsection p / .section h3 d'écraser les styles internes */ .dossier-crossref .dossier-crossref__category { font-family: 'Orbitron', monospace; font-size: 7.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--xref-color); opacity: 0.6; margin: 0 0 2px; line-height: 1.4; max-width: none; } .dossier-crossref .dossier-crossref__desc { font-family: 'Exo 2', sans-serif; font-size: 12.5px; line-height: 1.7; color: var(--text-lo); margin: 0 0 14px; max-width: none; } .dossier-crossref .dossier-crossref__title { font-family: 'Exo 2', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-hi); line-height: 1.3; margin: 0; letter-spacing: normal; text-transform: none; background: none; -webkit-text-fill-color: var(--text-hi); border: none; padding: 0; } .dossier-crossref .dossier-crossref__title::before, .dossier-crossref .dossier-crossref__title::after { display: none; } /* ── Responsive ── */ @media (max-width: 520px) { .dossier-crossref { padding: 18px 16px; } .dossier-crossref__header { gap: 10px; } .dossier-crossref__icon svg { width: 26px; height: 26px; } .dossier-crossref__scan { display: none; } .dossier-crossref__footer { flex-direction: column; align-items: flex-start; } } /* ════════════════════════════════════════════════════════════ FICHE PHARMACO — encadré données moléculaires & métaboliques À placer dans la section #pharmacologie de chaque page substance ════════════════════════════════════════════════════════════ */ .pharma-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08); padding: 22px 24px 18px; position: relative; overflow: hidden; margin: 24px 0; } .pharma-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, transparent 30%, transparent 100%); } .pharma-card__title { margin: 0 0 4px; font-family: 'Share Tech Mono', monospace; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-hi); font-weight: 400; } .pharma-card__ids { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; color: var(--text-lo); letter-spacing: 0.08em; margin: 0 0 18px; } .pharma-card__ids .sep { color: var(--accent-60); margin: 0 6px; } .pharma-card__mech { font-size: 12.5px; line-height: 1.6; color: var(--text-mid); padding: 12px 14px; border: 1px dashed var(--accent-30); background: var(--accent-08); margin: 0 0 18px; } .pharma-card__mech .lbl { font-size: 9.5px; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; margin-right: 8px; } .pharma-card__mech b { color: var(--accent); font-weight: 400; } .pharma-card__stack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08); } .pharma-card__cell { background: var(--bg-card); padding: 11px 12px 10px; display: flex; flex-direction: column; gap: 3px; min-height: 60px; } .pharma-card__cell--wide { grid-column: span 2; } .pharma-card__cell--full { grid-column: 1 / -1; } .pharma-card__cell .k { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-lo); } .pharma-card__cell .v { font-size: 13px; color: var(--text-hi); font-family: 'Share Tech Mono', monospace; } .pharma-card__cell .v .unit { color: var(--text-lo); font-size: 10.5px; margin-left: 2px; } .pharma-card__links { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; flex-wrap: wrap; } .pharma-card__btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, 0.08); background: transparent; transition: all 0.2s ease; } .pharma-card__btn::before { content: ""; width: 5px; height: 5px; background: var(--accent-60); display: inline-block; transition: background 0.2s ease; } .pharma-card__btn:hover { color: var(--accent); border-color: var(--accent-60); background: var(--accent-08); } .pharma-card__btn:hover::before { background: var(--accent); } .pharma-card__btn .arrow { margin-left: 3px; opacity: 0.6; } @media (max-width: 560px) { .pharma-card { padding: 18px 16px 14px; } .pharma-card__stack { grid-template-columns: repeat(2, 1fr); } .pharma-card__cell--wide { grid-column: span 2; } .pharma-card__links { justify-content: stretch; } .pharma-card__btn { flex: 1; justify-content: center; } } /* Carte B1 - widget Mixtures */ .b1-card { display: grid; grid-template-columns: 54px 1fr; border: 1px solid var(--border-hi); border-radius: 6px; overflow: hidden; background: var(--bg-card); transition: border-color 0.2s; --lv-rgb: 160, 160, 175; --lv-hi: #b8b8c8; } .b1-card.is-extreme { --lv-rgb: 255, 95, 95; --lv-hi: #ff9090; } .b1-card.is-high { --lv-rgb: 255, 144, 64; --lv-hi: #ffb380; } .b1-card.is-moderate { --lv-rgb: 255, 208, 64; --lv-hi: #ffd870; } .b1-card.is-low { --lv-rgb: 80, 255, 112; --lv-hi: #80ff9c; } .b1-card.is-unknown { --lv-rgb: 160, 160, 175; --lv-hi: #b8b8c8; } .b1-card:hover { border-color: rgba(var(--lv-rgb), 0.4); } .b1-band { background: rgba(var(--lv-rgb), 0.08); border-right: 1px solid rgba(var(--lv-rgb), 0.25); display: flex; align-items: center; justify-content: center; min-height: 100%; } .b1-band-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--lv-rgb), 0.15); border: 1px solid rgba(var(--lv-rgb), 0.5); display: flex; align-items: center; justify-content: center; color: var(--lv-hi); box-shadow: 0 0 12px rgba(var(--lv-rgb), 0.2); } .b1-band-icon svg { width: 16px; height: 16px; } .b1-content { padding: 14px 18px; } .b1-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .b1-combo { font-family: 'Orbitron', sans-serif; font-size: 0.92rem; color: var(--text-hi); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; } .b1-combo .plus { color: var(--text-hi); margin: 0 6px; } .nick { display: inline-block; margin-left: 8px; padding: 1px 8px; background: var(--accent-08); border: 1px solid var(--accent-30); border-radius: 20px; font-family: 'Exo 2', sans-serif; font-size: 0.7rem; font-style: italic; color: var(--accent); vertical-align: middle; text-transform: none; } .b1-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .b1-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-family: 'Share Tech Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; } .b1-chip-risk { background: rgba(var(--lv-rgb), 0.1); border: 1px solid rgba(var(--lv-rgb), 0.4); color: var(--lv-hi); } .b1-chip-syn { background: rgba(177, 109, 255, 0.12); border: 1px solid rgba(177, 109, 255, 0.40); color: #b16dff; } .b1-chip-risk.unknown, .b1-chip-syn.unknown { background: rgba(255, 255, 255, 0.04); border-color: var(--border-hi); color: var(--text-lo); } .b1-chip svg { width: 12px; height: 12px; flex: 0 0 auto; } .b1-prose { font-family: 'Exo 2', sans-serif; color: var(--text-mid); font-size: 0.88rem; line-height: 1.6; margin: 0 0 8px; } .b1-prose .lead { color: var(--text-hi); font-weight: 500; } .b1-prose .lead .lv { color: var(--lv-hi); font-weight: 600; } .b1-prose .lead .syn { color: #b16dff; font-weight: 600; } .b1-prose .lead .lv.unknown, .b1-prose .lead .syn.unknown { color: var(--text-lo); } .b1-prose .joiner { color: var(--text-hi); font-style: italic; margin-right: 2px; } .b1-prose-empty { color: var(--text-lo); font-style: italic; font-size: 0.82rem; } .b1-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; color: var(--text-lo); text-decoration: none; transition: color 0.2s; margin-top: 4px; } .b1-link::before { content: '→'; color: var(--text-hi); } .b1-link:hover { color: var(--text-hi); } @media (max-width: 640px) { .b1-card { grid-template-columns: 1fr; } .b1-band { border-right: 0; border-bottom: 1px solid rgba(var(--lv-rgb), 0.25); min-height: 52px; } .b1-content { padding: 14px 14px 16px; } .b1-chips { margin-left: 0; } .b1-combo { font-size: 0.84rem; } .b1-prose { font-size: 0.84rem; } }