: les h2 vivent directement dans
.article-content. On reproduit le style .section > h2. */
.article-content > 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;
}
.article-content > h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40%;
height: 2px;
background: linear-gradient(90deg, var(--accent-60), transparent);
border-radius: 1px;
}
.article-content > h2:first-of-type {
margin-top: var(--subsection-gap);
}
/* ── 2. AUTHOR META ──────────────────────────────────────────
Bloc auteur dans les dossiers éditoriaux. */
.article-meta {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
}
.author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--accent-30);
object-fit: cover;
}
.author-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.author-name {
font-family: 'Exo 2', sans-serif;
font-size: 13px;
color: var(--text-mid);
}
.publish-date {
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-lo);
}
.author-name strong {
color: var(--accent);
font-weight: 600;
}
/* ── 3. IMAGES ARTICLE ───────────────────────────────────────
Images responsives, figures, grilles d'images. */
.responsive-article-image {
width: 100%;
height: auto;
border-radius: 6px;
border: 1px solid var(--border);
display: block;
margin: 0 auto;
}
.article-image {
margin: 28px 0;
}
.article-image figcaption {
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--text-lo);
margin-top: 10px;
text-align: center;
}
.article-figure,
.article-figure--fullwidth {
margin: 28px 0;
}
.article-figure-image {
width: 100%;
height: auto;
border-radius: 6px;
border: 1px solid var(--border);
display: block;
}
.article-figure-caption {
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--text-lo);
margin-top: 10px;
text-align: center;
}
.article-images-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin: 24px 0;
}
.article-images-row img {
width: 100%;
height: auto;
border-radius: 6px;
border: 1px solid var(--border);
object-fit: cover;
}
/* ── 4. LIENS : internal-link, external-emphasis, cta-button ─ */
.internal-link {
color: var(--accent-85);
border-bottom: 1px dashed var(--accent-30);
text-decoration: none;
transition: color 0.2s, border-color 0.2s;
}
.internal-link:hover {
color: var(--accent);
border-color: var(--accent-60);
}
.external-emphasis {
color: var(--accent-85);
text-decoration: none;
border-bottom: 1px solid var(--accent-30);
transition: color 0.2s, border-color 0.2s;
}
.external-emphasis:hover {
color: var(--accent);
border-color: var(--accent);
}
.cta-button {
display: inline-block;
padding: 10px 22px;
font-family: 'Exo 2', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--accent);
border: 1px solid var(--accent-30);
background: var(--accent-08);
text-decoration: none;
transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cta-button:hover {
background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.14);
border-color: var(--accent-60);
box-shadow: 0 4px 16px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12);
}
/* ── 5. EMBEDS (YouTube, iframes, cartes) ──────────────────── */
.embed-wrap,
.vidéo-yt .embed-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
border-radius: 8px;
border: 1px solid var(--border-hi);
margin: 24px auto;
background: var(--bg-card);
}
.embed-wrap iframe,
.vidéo-yt .embed-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: none;
border-radius: 8px;
}
.vidéo-yt {
margin: 28px 0;
}
.map-container {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-hi);
margin: 24px 0;
}
.map-container iframe {
display: block;
border: none;
}
/* ── 6. INFO-CARDS & GRILLES ─────────────────────────────────
Composants de matériel.html et dosages.html */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 20px 0;
}
.info-grid.grid-3 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.info-card {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 20px;
transition: border-color 0.25s;
}
.info-card:hover {
border-color: var(--accent-30);
}
.info-card h4 {
font-family: 'Orbitron', monospace;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-85);
margin: 0 0 10px;
}
.info-card h5 {
font-family: 'Orbitron', monospace;
font-weight: 700;
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent-85);
margin: 0 0 8px;
}
.info-card p {
font-size: 13.5px;
line-height: 1.8;
color: var(--text-mid);
margin: 0;
}
.example-card {
border-left: 2px solid var(--accent-60);
}
/* ── 7. CARD GRID (matériel V1) ────────────────────────────── */
.card-grid {
display: flex;
flex-direction: column;
gap: 24px;
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 24px;
}
.card h3 {
font-family: 'Orbitron', monospace;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-hi);
margin: 0 0 14px;
}
.card-list {
list-style: none;
padding: 0;
margin: 12px 0;
}
.card-item {
font-size: 14px;
line-height: 1.85;
color: var(--text-mid);
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.card-item:last-child {
border-bottom: none;
}
.card-learn-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Share Tech Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-85);
text-decoration: none;
margin-top: 12px;
transition: color 0.2s;
}
.card-learn-more:hover {
color: var(--accent);
}
.card-link {
display: inline-block;
padding: 8px 18px;
font-family: 'Exo 2', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--accent);
border: 1px solid var(--accent-30);
text-decoration: none;
transition: background 0.25s, border-color 0.25s;
}
.card-link:hover {
background: var(--accent-08);
border-color: var(--accent-60);
}
/* ── 8. STEP LIST ──────────────────────────────────────────── */
.step-list {
list-style: none;
padding: 0;
margin: 16px 0;
counter-reset: step-counter;
}
.step-list li {
counter-increment: step-counter;
position: relative;
padding: 10px 0 10px 36px;
font-size: 14px;
line-height: 1.8;
color: var(--text-mid);
border-bottom: 1px solid var(--border);
}
.step-list li:last-child { border-bottom: none; }
.step-list li::before {
content: counter(step-counter, decimal-leading-zero);
position: absolute;
left: 0;
font-family: 'Share Tech Mono', monospace;
font-size: 11px;
color: var(--accent-60);
opacity: 0.7;
}
/* ── 9. TABLES ───────────────────────────────────────────────
.intoxication-table, .article-table, .data-table */
.intoxication-table,
.article-table,
.data-table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-family: 'Exo 2', sans-serif;
font-size: 14px;
}
.intoxication-table thead tr,
.article-table thead tr,
.data-table thead tr {
border-bottom: 2px solid var(--accent-30);
}
.intoxication-table th,
.article-table th,
.data-table th {
font-family: 'Orbitron', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent-85);
padding: 10px 12px;
text-align: left;
}
.intoxication-table td,
.article-table td,
.data-table td {
padding: 10px 12px;
color: var(--text-mid);
border-bottom: 1px solid var(--border);
}
.intoxication-table tbody tr:hover td,
.article-table tbody tr:hover td,
.data-table tbody tr:hover td {
background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.04);
}
.table-caption {
font-family: 'Orbitron', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-hi);
margin-bottom: 8px;
}
.table-description {
font-family: 'Exo 2', sans-serif;
font-size: 13px;
line-height: 1.7;
color: var(--text-lo);
margin-bottom: 16px;
}
/* ── 10. ARTICLE ENCARTS (callouts) ──────────────────────────
Boîtes thématiques dans DRD et pourquoi-on-se-drogue. */
.article-encarts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2px;
margin: 28px 0;
}
/* ── Base commune ── */
.article-encart--normal,
.article-encart--aside {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 22px 22px 20px;
position: relative;
transition: border-color 0.25s, box-shadow 0.25s;
}
/* Coin décoratif haut-gauche */
.article-encart--normal::before,
.article-encart--aside::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 8px; height: 8px;
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;
}
/* --aside : barre accent en haut */
.article-encart--aside {
border-top: 2px solid var(--accent-60);
}
/* --normal : barre subtile */
.article-encart--normal {
border-top: 2px solid var(--border-hi);
}
/* Hover */
.article-encart--normal:hover,
.article-encart--aside:hover {
border-color: var(--accent-30);
box-shadow: 0 4px 24px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06);
}
.article-encart--normal:hover::before,
.article-encart--aside:hover::before {
width: 14px; height: 14px;
border-color: var(--accent-60);
}
/* ── Titre h3 dans les encarts ── */
.article-encart--aside h3,
.article-encart--normal h3,
.factor-detail h3 {
font-family: 'Orbitron', monospace;
font-weight: 700;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-85);
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
position: relative;
background: none;
-webkit-text-fill-color: var(--accent-85);
}
/* Accent underline partiel */
.article-encart--aside h3::after,
.article-encart--normal h3::after,
.factor-detail h3::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 28px; height: 1px;
background: var(--accent);
}
/* Supprime le ::before hérité de .subsection > h3 */
.article-encart--aside h3::before,
.article-encart--normal h3::before,
.factor-detail h3::before {
display: none;
}
/* ── Paragraphes dans les encarts ── */
.article-encart--aside p,
.article-encart--normal p {
font-family: 'Exo 2', sans-serif;
font-size: 14px;
line-height: 1.9;
color: var(--text-mid);
margin: 0;
}
.article-encart--normal ul,
.article-encart--normal ol {
margin: 0;
padding-left: 1.2em;
}
.article-encart--normal li {
font-family: 'Exo 2', sans-serif;
font-size: 14px;
line-height: 1.9;
color: var(--text-mid);
}
.article-encart--aside p + p,
.article-encart--normal p + p {
margin-top: 10px;
}
/* ── Liste dans les encarts (.article-encart--list est un
) ── */
.article-encart--list {
list-style: none;
padding: 0;
margin: 0;
}
.article-encart--list li {
display: flex;
align-items: baseline;
gap: 10px;
font-family: 'Exo 2', sans-serif;
font-size: 13.5px;
line-height: 1.7;
color: var(--text-mid);
padding: 7px 0;
border-bottom: 1px solid var(--border);
}
.article-encart--list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.article-encart--list li::before {
content: '›';
font-family: 'Share Tech Mono', monospace;
color: var(--accent-60);
flex-shrink: 0;
line-height: 1;
}
.encart-blockquote {
font-style: italic;
color: var(--text-mid);
margin: 0;
font-size: 14px;
line-height: 1.85;
}
.encart-ref {
display: block;
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--text-lo);
margin-top: 10px;
font-style: normal;
}
/* Citation-ref inside encart-blockquote : même style que dans les blockquotes réguliers */
.encart-blockquote .citation-ref,
.encart-blockquote small.citation-ref {
display: block;
font-style: normal;
font-size: 11px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.5);
font-family: 'Exo 2', sans-serif;
letter-spacing: 0.02em;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.encart-blockquote .citation-ref em {
color: rgba(255, 255, 255, 0.45);
font-style: italic;
}
/* ── 11. CHARTS ──────────────────────────────────────────────
Conteneurs pour les graphiques JS (harm-scores, carousel…) */
.chart-container {
margin: 24px 0;
position: relative;
}
.chart-wrapper {
margin: 24px 0;
position: relative;
}
.chart-carousel-container {
position: relative;
overflow: hidden;
margin: 24px 0;
}
.chart-slide {
display: none;
}
.chart-slide.active {
display: block;
}
.chart-nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--accent-85);
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.chart-nav-arrow:hover {
border-color: var(--accent-60);
background: var(--accent-08);
}
.chart-nav-prev { left: 8px; }
.chart-nav-next { right: 8px; }
.chart-indicators {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 14px;
}
.chart-indicator {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border-hi);
border: none;
cursor: pointer;
transition: background 0.2s;
}
.chart-indicator.active {
background: var(--accent-85);
}
/* ── 12. NPS UI ──────────────────────────────────────────────
Composants du graphique NPS (nps-chart.js) */
.nps-filters,
.nps-filters-chart {
margin: 20px 0;
}
.nps-load-error {
margin: 24px 0;
padding: 16px;
border: 1px dashed var(--border);
border-radius: 8px;
text-align: center;
color: var(--text-lo);
font-family: 'Exo 2', sans-serif;
font-size: 14px;
}
.nps-filter-type {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.nps-filter-label {
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-lo);
}
.nps-select {
position: relative;
}
.nps-native-select {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.nps-select-trigger {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-card);
border: 1px solid var(--border);
padding: 6px 12px;
cursor: pointer;
font-family: 'Exo 2', sans-serif;
font-size: 13px;
color: var(--text-mid);
}
.nps-select-value { flex: 1; }
.nps-select-caret {
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--text-lo);
}
.nps-select-popover {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
background: var(--bg-card2);
border: 1px solid var(--border-hi);
z-index: 100;
max-height: 240px;
overflow-y: auto;
}
.nps-select-list {
list-style: none;
padding: 0;
margin: 0;
}
.nps-filters-note {
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--text-lo);
margin-top: 8px;
}
.nps-year-details {
margin-top: 16px;
}
/* Résumé statistique au-dessus du graphique */
.nps-summary {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
}
.nps-summary-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 3px solid var(--accent-60, var(--border-hi));
min-width: 120px;
}
.nps-summary-value {
font-family: 'Exo 2', sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.1;
color: var(--text-hi);
}
.nps-summary-label {
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-lo);
}
/* Barres interactives */
.nps-bar {
cursor: pointer;
transition: fill 0.15s ease, opacity 0.15s ease;
}
.nps-bar:focus,
.nps-bar:focus-visible {
outline: none;
}
.nps-filters-chart {
position: relative;
}
/* Tooltip flottante */
.nps-tooltip {
position: absolute;
pointer-events: none;
transform: translate(-50%, calc(-100% - 10px));
background: var(--bg-card2, #1b1b1f);
border: 1px solid var(--border-hi);
color: var(--text-hi);
font-family: 'Exo 2', sans-serif;
font-size: 12px;
padding: 4px 8px;
white-space: nowrap;
border-radius: 4px;
opacity: 0;
transition: opacity 0.12s ease;
z-index: 20;
}
/* Panneau de détail par année */
.nps-year-details-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 8px;
margin-bottom: 12px;
border-bottom: 1px solid var(--border);
font-family: 'Exo 2', sans-serif;
font-size: 15px;
color: var(--text-hi);
}
.nps-year-details-title > div:last-child {
font-family: 'Share Tech Mono', monospace;
font-size: 13px;
color: var(--accent-85, var(--text-mid));
}
.nps-year-details-group {
margin-bottom: 16px;
}
.nps-year-details-group h4 {
margin: 0 0 8px;
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-mid);
}
.nps-year-details-group h4 span {
color: var(--text-lo);
}
.nps-year-details-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.nps-year-details-list li {
padding: 3px 10px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
font-family: 'Exo 2', sans-serif;
font-size: 12px;
color: var(--text-mid);
}
/* ── 13. ACKNOWLEDGMENTS ─────────────────────────────────────
Section remerciements (histoire-de-la-prohibition) */
.acknowledgments-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 20px 0;
}
.ack-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: var(--bg-card);
border: 1px solid var(--border);
transition: border-color 0.25s;
}
.ack-item:hover {
border-color: var(--accent-30);
}
.ack-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border-hi);
}
.ack-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.ack-name {
font-family: 'Exo 2', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-hi);
}
.ack-role {
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--text-lo);
}
/* ── 14. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 768px) {
.article-encarts {
grid-template-columns: 1fr;
}
.info-grid,
.info-grid.grid-3 {
grid-template-columns: 1fr;
}
.article-images-row {
grid-template-columns: 1fr;
}
.acknowledgments-grid {
grid-template-columns: 1fr;
}
.chart-nav-arrow {
width: 28px; height: 28px;
}
}
/* ── 15. DRUG PILLS (pharmacosexualité) ──────────────────────
Pastilles cliquables renvoyant vers les fiches substances. */
.associated-drugs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 24px;
}
.drug-pill {
display: inline-block;
padding: 5px 14px;
font-family: 'Exo 2', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.03em;
border-radius: 20px;
border: 1px solid var(--accent-30);
color: var(--accent-85);
background: var(--accent-08);
text-decoration: none;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.drug-pill:hover {
background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.14);
border-color: var(--accent-60);
box-shadow: 0 2px 10px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10);
}
/* Couleurs par catégorie de substance */
.drug-pill.stimulants { --accent-r:240; --accent-g:134; --accent-b:117; }
.drug-pill.cathinones { --accent-r:248; --accent-g:176; --accent-b:165; }
.drug-pill.depresseurs { --accent-r:210; --accent-g:197; --accent-b: 95; }
.drug-pill.psychedeliques { --accent-r:211; --accent-g: 75; --accent-b:215; }
.drug-pill.dissociatifs { --accent-r:110; --accent-g:240; --accent-b:169; }
.drug-pill.empathogenes { --accent-r:147; --accent-g:125; --accent-b:255; }
.drug-pill.cannabinoides { --accent-r: 95; --accent-g:195; --accent-b: 80; }
.drug-pill.opioides { --accent-r:210; --accent-g:197; --accent-b: 95; }
/* ── 16. EXTERNAL-LINK ─────────────────────────────────────── */
.external-link {
color: var(--accent-85);
text-decoration: none;
border-bottom: 1px solid var(--accent-30);
transition: color 0.2s, border-color 0.2s;
}
.external-link:hover {
color: var(--accent);
border-color: var(--accent);
}
/* ════════════════════════════════════════════════════════════
17. THRESHOLD CARDS (machinesv2 — seuils de dépistage)
Grille de cartes avec listes de données substance/seuil.
════════════════════════════════════════════════════════════ */
.threshold-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 25px 0;
}
.threshold-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 3px solid var(--accent);
border-radius: 12px;
padding: 24px;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
}
.threshold-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.05);
border-color: var(--accent-60);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.threshold-card h4 {
margin: 0 0 20px 0;
font-family: 'Exo 2', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 12px;
color: #fff;
}
.threshold-card h4 svg {
width: 24px;
height: 24px;
color: var(--accent);
flex-shrink: 0;
}
.threshold-list {
list-style: none;
padding: 0;
margin: 0;
}
.threshold-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 0.95rem;
}
.threshold-item:last-child {
border-bottom: none;
}
.threshold-label {
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.threshold-value {
color: var(--accent);
font-weight: 700;
font-family: 'Exo 2', sans-serif;
}
.threshold-unit {
font-size: 0.8rem;
opacity: 0.6;
margin-left: 4px;
}
@media (max-width: 768px) {
.threshold-grid {
grid-template-columns: 1fr;
}
}
/* ════════════════════════════════════════════════════════════
18. WARNING CARD
Variante de .info-card pour les alertes / mises en garde.
════════════════════════════════════════════════════════════ */
.warning-card {
border-left: 3px solid var(--red);
background: var(--red-30);
margin-top: 20px;
}
.warning-card p {
margin: 0;
}
/* ════════════════════════════════════════════════════════════
19. LEGAL STATUS BADGES
Pastilles de statut légal (Classe A/B/C, Légal/Illégal…)
utilisées dans drogues-risques-et-dangers.
════════════════════════════════════════════════════════════ */
.legal-danger { color: #dc2626; font-weight: 600; }
.legal-warning { color: #f59e0b; font-weight: 600; }
.legal-ok { color: #10b981; font-weight: 600; }
.legal-neutral { color: #6b7280; font-weight: 600; }
/* ════════════════════════════════════════════════════════════
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);
}
.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; }
}
/* ========================================
DETAILS & SUMMARY (Aller plus loin)
======================================== */
details {
margin: 2rem 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
summary {
display: inline-flex;
padding: 0;
background: none !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
color: rgba(255, 255, 255, 0.85);
font-family: 'Exo 2', sans-serif;
font-size: 1rem;
font-weight: 400;
cursor: pointer;
align-items: center;
transition: color 0.15s ease;
list-style: none;
user-select: text;
text-decoration: none;
}
summary:hover {
color: var(--cyan);
}
summary:active {
color: var(--cyan);
}
summary:focus-visible {
outline: none;
color: var(--cyan);
}
summary::before {
content: '';
display: inline-block;
width: 0;
height: 0;
margin-right: 0.6rem;
vertical-align: middle;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid currentColor;
transform: rotate(0deg);
transform-origin: center;
transition: transform 0.2s ease-in-out;
}
details[open] summary::before {
transform: rotate(90deg);
}
summary::after {
content: none;
}
details[open] summary {
color: var(--cyan);
margin-bottom: 15px;
}
summary::-webkit-details-marker {
display: none;
}
summary::marker {
display: none;
}
details[open] .article-encart--normal {
animation: slideDown 0.3s ease-out forwards;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
transform: translateY(-10px);
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
}
to {
opacity: 1;
max-height: 2000px;
transform: translateY(0);
margin-top: 0;
padding-top: 25px;
padding-bottom: 25px;
}
}
details .article-encart--normal {
width: 100%;
box-sizing: border-box;
margin-top: 0;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.2) 100%);
border-radius: 12px;
padding: 25px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
}