/* ══════════════════════════════════════════════════════════════════════════
   STYLE-INTERACTIONS.CSS — outil « Interactions »
   ──────────────────────────────────────────────────────────────────────────
   Charge après : fonts.css → style-general.css → style-outils.css
   ══════════════════════════════════════════════════════════════════════════ */

body.tool-interactions {
	--accent-r: 110;
	--accent-g: 240;
	--accent-b: 169;

	--risk-unknown: #6b7280;
	--risk-neutral: #4caf50;
	--risk-caution: #f5ed87;
	--risk-unsafe: #ffb700;
	--risk-danger: #ff3b3b;

	--syn-unknown: #6b7280;
	--syn-neutral: #7aa7ff;
	--syn-decrease: #6ef0a9;
	--syn-increase: #ff8a3d;
	--syn-mixed: #c8a2ff;
	--syn-additive: #4dd6e8;
}

.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;
}


/* ── Couleurs de catégorie ────────────────────────────────────────────── */

.tool-interactions .cat-antidepresseurs { --cat: #8fb8ff; }
.tool-interactions .cat-dissociatifs    { --cat: var(--dissociatifs); }
.tool-interactions .cat-gabaminergiques { --cat: var(--depresseurs); }
.tool-interactions .cat-opioides        { --cat: var(--opioides); }
.tool-interactions .cat-psychedeliques  { --cat: var(--psychedeliques); }
.tool-interactions .cat-stimulants      { --cat: var(--stimulants); }
.tool-interactions .cat-autres          { --cat: #9aa4b2; }


/* ── En-tête ──────────────────────────────────────────────────────────── */

body.tool-interactions .dz-inter-header {
	position: relative;
	z-index: 10;
	padding: 48px 24px 24px;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.tool-interactions .dz-inter-header__title {
	font-family: 'Orbitron', sans-serif;
	font-size: clamp(22px, 5vw, 34px) !important;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin: 0 auto 8px !important;
	color: #fff;
}

body.tool-interactions .dz-inter-header__title span:first-child {
	text-shadow: 0.02em 0 #ff00e5, -0.02em 0 #00f0ff;
}

body.tool-interactions .dz-inter-header__title span:last-child {
	background: linear-gradient(135deg, #00f0ff, #ff00e5, #ffaa00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

body.tool-interactions .dz-inter-header .lead {
	max-width: 66ch;
	font-family: 'Exo 2', sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: var(--text-mid);
	margin: 14px auto 0;
	text-align: center;
}

body.tool-interactions .dz-inter-header .lead strong { color: var(--text-hi); font-weight: 600; }


/* ── Structure ────────────────────────────────────────────────────────── */

.tool-interactions .wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px 96px;
}

.tool-interactions section { margin-top: var(--section-gap); }

.dz-kicker {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-60);
	margin: 0 0 10px;
}

.dz-h2 {
	font-family: 'Orbitron', sans-serif;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	color: var(--text-hi);
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}

.dz-h3 {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--text-hi);
	margin: 0 0 8px;
}

.dz-lead {
	max-width: 68ch;
	line-height: 1.7;
	color: var(--text-mid);
	margin: 0 0 28px;
}

.dz-lead strong { color: var(--text-hi); font-weight: 600; }


/* ── Sélecteur ────────────────────────────────────────────────────────── */

.dz-picker {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 22px;
}

.dz-picker__lab {
	display: block;
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-lo);
	margin-bottom: 8px;
}

.dz-picker__input {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--border-hi);
	border-radius: 8px;
	color: var(--text-hi);
	font: inherit;
	padding: 11px 14px;
	transition: border-color 0.2s;
}

.dz-picker__input:focus {
	outline: none;
	border-color: var(--accent-50);
}

.dz-picker__hint {
	font-size: 0.82rem;
	color: var(--text-lo);
	margin: 8px 0 20px;
}

.dz-chips__group + .dz-chips__group { margin-top: 18px; }

.dz-chips__cat {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cat, var(--text-lo));
	margin: 0 0 8px;
}

.dz-chips__list { display: flex; flex-wrap: wrap; gap: 8px; }

.dz-chip {
	border: 1px solid color-mix(in srgb, var(--cat, #888) 30%, transparent);
	background: color-mix(in srgb, var(--cat, #888) 7%, transparent);
	color: var(--text-mid);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 0.9rem;
	transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.dz-chip:hover {
	background: color-mix(in srgb, var(--cat, #888) 16%, transparent);
	color: var(--text-hi);
}

.dz-chip.is-on {
	background: color-mix(in srgb, var(--cat, #888) 26%, transparent);
	border-color: var(--cat, #888);
	color: #fff;
	font-weight: 600;
}


/* ── Sélection courante ───────────────────────────────────────────────── */

.dz-selection { margin-top: 24px; }

.dz-selection__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.dz-tag {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--cat, #888);
	background: color-mix(in srgb, var(--cat, #888) 18%, transparent);
	color: var(--text-hi);
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 0.9rem;
}

.dz-tag__x { color: var(--text-lo); font-size: 1.1rem; line-height: 1; }
.dz-tag:hover .dz-tag__x { color: var(--red); }

.dz-btn-reset {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-lo);
	border-bottom: 1px solid transparent;
}

.dz-btn-reset:hover { color: var(--text-hi); border-bottom-color: var(--border-hi); }

.dz-hint {
	color: var(--text-lo);
	font-size: 0.92rem;
	margin: 24px 0 0;
	padding: 16px 18px;
	border: 1px dashed var(--border-hi);
	border-radius: 10px;
}


/* ── Encadré d'avertissement ──────────────────────────────────────────── */

.dz-warnbox {
	margin-top: 26px;
	border: 1px solid rgba(255, 183, 0, 0.30);
	background: rgba(255, 183, 0, 0.06);
	border-radius: 12px;
	padding: 18px 20px;
}

.dz-warnbox__t {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--amber);
	margin: 0 0 6px;
}

.dz-warnbox p { margin: 0; line-height: 1.65; color: var(--text-mid); font-size: 0.94rem; }


/* ── Carte de combinaison ─────────────────────────────────────────────── */

.dz-results { display: grid; gap: 20px; margin-top: 26px; }

.dz-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-left: 3px solid var(--risk-unknown);
	border-radius: 14px;
	padding: 22px;
}

.dz-card.risk-neutral { border-left-color: var(--risk-neutral); }
.dz-card.risk-caution { border-left-color: var(--risk-caution); }
.dz-card.risk-unsafe  { border-left-color: var(--risk-unsafe); }
.dz-card.risk-danger  { border-left-color: var(--risk-danger); }

.dz-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	font-family: 'Orbitron', sans-serif;
	font-size: 1.12rem;
	margin: 0 0 18px;
}

.dz-card__title span[class^="cat-"] { color: var(--cat, var(--text-hi)); }
.dz-card__plus { color: var(--text-lo); font-weight: 400; }

.dz-card__badges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

.dz-badge {
	display: flex;
	gap: 13px;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1px solid var(--border-hi);
	background: var(--bg-card2);
}

.dz-badge__sym {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 8px;
	font-family: 'Share Tech Mono', monospace;
	font-size: 1.05rem;
	font-weight: 700;
	color: #04040a;
	background: var(--risk-unknown);
}

.dz-badge.risk-neutral .dz-badge__sym { background: var(--risk-neutral); }
.dz-badge.risk-caution .dz-badge__sym { background: var(--risk-caution); }
.dz-badge.risk-unsafe  .dz-badge__sym { background: var(--risk-unsafe); }
.dz-badge.risk-danger  .dz-badge__sym { background: var(--risk-danger); color: #fff; }

.dz-badge.syn-neutral  .dz-badge__sym { background: var(--syn-neutral); }
.dz-badge.syn-decrease .dz-badge__sym { background: var(--syn-decrease); }
.dz-badge.syn-increase .dz-badge__sym { background: var(--syn-increase); }
.dz-badge.syn-mixed    .dz-badge__sym { background: var(--syn-mixed); }
.dz-badge.syn-additive .dz-badge__sym { background: var(--syn-additive); }

.dz-badge__lab {
	font-weight: 600;
	color: var(--text-hi);
	margin: 0 0 4px;
	font-size: 0.96rem;
}

.dz-badge__def {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--text-mid);
}

.dz-badge__reli {
	margin: 7px 0 0;
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-lo);
}

.dz-card__nodata {
	margin: 14px 0 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--text-lo);
	border-left: 2px solid var(--border-hi);
	padding-left: 12px;
}


/* ── Mécanismes ───────────────────────────────────────────────────────── */

.dz-meca { margin-top: 20px; }

.dz-meca__kicker {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-60);
	margin: 0 0 10px;
}

.dz-meca__item {
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--bg-card2);
	margin-bottom: 8px;
	overflow: hidden;
}

.dz-meca__sum {
	cursor: pointer;
	padding: 11px 15px;
	font-weight: 600;
	font-size: 0.93rem;
	color: var(--text-hi);
	list-style: none;
	position: relative;
	padding-right: 40px;
}

.dz-meca__sum::-webkit-details-marker { display: none; }

.dz-meca__sum::after {
	content: '+';
	position: absolute;
	right: 15px; top: 50%;
	transform: translateY(-50%);
	color: var(--accent);
	font-family: 'Share Tech Mono', monospace;
}

.dz-meca__item[open] .dz-meca__sum::after { content: '−'; }

.dz-meca__d {
	margin: 0;
	padding: 0 15px 12px;
	font-size: 0.89rem;
	line-height: 1.65;
	color: var(--text-mid);
}

.dz-meca__rdr {
	margin: 0;
	padding: 0 15px 14px 32px;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--text-mid);
}

.dz-meca__rdr li { margin-bottom: 4px; }
.dz-meca__rdr li::marker { color: var(--accent-60); }


/* ── Pied de carte ────────────────────────────────────────────────────── */

.dz-card__foot { margin-top: 18px; }

.dz-card__link {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--accent-30);
	padding-bottom: 2px;
}

.dz-card__link::after { content: ' ↗'; }


/* ── Matrice ──────────────────────────────────────────────────────────── */

.dz-matrix-ctl { display: flex; gap: 8px; margin-bottom: 18px; }

.dz-seg {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 16px;
	border: 1px solid var(--border-hi);
	border-radius: 999px;
	color: var(--text-lo);
	transition: all 0.18s;
}

.dz-seg:hover { color: var(--text-hi); }

.dz-seg.is-on {
	background: var(--accent-15);
	border-color: var(--accent-50);
	color: var(--accent);
}

.dz-matrix-scroll {
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--bg-card);
	max-height: 78vh;
}

.dz-matrix { border-collapse: separate; border-spacing: 2px; padding: 6px; }

.dz-matrix__corner {
	position: sticky; left: 0; top: 0; z-index: 3;
	background: var(--bg-card);
}

.dz-matrix__ch {
	position: sticky; top: 0; z-index: 2;
	background: var(--bg-card);
	height: 122px;
	width: 30px;
	padding: 0;
	vertical-align: bottom;
}

.dz-matrix__ch span {
	display: block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--cat, var(--text-mid));
	white-space: nowrap;
	padding-bottom: 6px;
	text-align: left;
}

.dz-matrix__rh {
	position: sticky; left: 0; z-index: 1;
	background: var(--bg-card);
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.72rem;
	font-weight: 400;
	text-align: right;
	white-space: nowrap;
	padding: 0 10px 0 6px;
	color: var(--cat, var(--text-mid));
}

.dz-matrix__self {
	background: color-mix(in srgb, var(--cat, #888) 30%, transparent);
	border-radius: 3px;
	width: 30px; height: 30px;
}

.dz-matrix__c {
	width: 30px; height: 30px;
	text-align: center;
	border-radius: 3px;
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.78rem;
	font-weight: 700;
	color: rgba(4, 4, 10, 0.8);
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
}

.dz-matrix__c:hover, .dz-matrix__c:focus-visible {
	transform: scale(1.22);
	box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(0, 0, 0, 0.5);
	z-index: 4;
	position: relative;
	outline: none;
}

.dz-matrix__c.risk-unknown { background: color-mix(in srgb, var(--risk-unknown) 32%, transparent); color: var(--text-lo); }
.dz-matrix__c.risk-neutral { background: var(--risk-neutral); }
.dz-matrix__c.risk-caution { background: var(--risk-caution); }
.dz-matrix__c.risk-unsafe  { background: var(--risk-unsafe); }
.dz-matrix__c.risk-danger  { background: var(--risk-danger); color: #fff; }

.dz-matrix.is-syn .dz-matrix__c.syn-unknown  { background: color-mix(in srgb, var(--syn-unknown) 32%, transparent); color: var(--text-lo); }
.dz-matrix.is-syn .dz-matrix__c.syn-neutral  { background: var(--syn-neutral); color: rgba(4,4,10,0.85); }
.dz-matrix.is-syn .dz-matrix__c.syn-decrease { background: var(--syn-decrease); color: rgba(4,4,10,0.85); }
.dz-matrix.is-syn .dz-matrix__c.syn-increase { background: var(--syn-increase); color: rgba(4,4,10,0.85); }
.dz-matrix.is-syn .dz-matrix__c.syn-mixed    { background: var(--syn-mixed); color: rgba(4,4,10,0.85); }
.dz-matrix.is-syn .dz-matrix__c.syn-additive { background: var(--syn-additive); color: rgba(4,4,10,0.85); }


/* ── Légende ──────────────────────────────────────────────────────────── */

.dz-legend { margin-top: 22px; }

.dz-legend__t {
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-lo);
	margin: 0 0 12px;
}

.dz-legend__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
}

.dz-legend__i {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 11px 13px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--bg-card);
}

.dz-legend__sym {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border-radius: 5px;
	font-family: 'Share Tech Mono', monospace;
	font-size: 0.8rem;
	font-weight: 700;
	color: rgba(4, 4, 10, 0.85);
	background: var(--risk-unknown);
}

.dz-legend__i.risk-unknown .dz-legend__sym { background: color-mix(in srgb, var(--risk-unknown) 45%, transparent); color: var(--text-mid); }
.dz-legend__i.risk-neutral .dz-legend__sym { background: var(--risk-neutral); }
.dz-legend__i.risk-caution .dz-legend__sym { background: var(--risk-caution); }
.dz-legend__i.risk-unsafe  .dz-legend__sym { background: var(--risk-unsafe); }
.dz-legend__i.risk-danger  .dz-legend__sym { background: var(--risk-danger); color: #fff; }

.dz-legend__i.syn-unknown  .dz-legend__sym { background: color-mix(in srgb, var(--syn-unknown) 45%, transparent); color: var(--text-mid); }
.dz-legend__i.syn-neutral  .dz-legend__sym { background: var(--syn-neutral); }
.dz-legend__i.syn-decrease .dz-legend__sym { background: var(--syn-decrease); }
.dz-legend__i.syn-increase .dz-legend__sym { background: var(--syn-increase); }
.dz-legend__i.syn-mixed    .dz-legend__sym { background: var(--syn-mixed); }
.dz-legend__i.syn-additive .dz-legend__sym { background: var(--syn-additive); }

.dz-legend__i strong {
	display: block;
	color: var(--text-hi);
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 3px;
}

.dz-legend__def {
	font-size: 0.83rem;
	line-height: 1.5;
	color: var(--text-mid);
}


/* ── Méthode ──────────────────────────────────────────────────────────── */

.dz-read__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 16px;
}

.dz-read__card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
}

.dz-read__card p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.68;
	color: var(--text-mid);
}

.dz-read__card em { color: var(--text-hi); font-style: normal; font-weight: 600; }


/* ── Sources ──────────────────────────────────────────────────────────── */

.dz-sources p {
	max-width: 72ch;
	line-height: 1.7;
	color: var(--text-mid);
	margin: 0 0 14px;
}

.dz-sources__note { font-size: 0.9rem; color: var(--text-lo); }


/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 720px) {
	.tool-interactions .wrap,
	.dz-inter-header { padding-left: 16px; padding-right: 16px; }
	.tool-interactions section { margin-top: 56px; }
	.dz-picker { padding: 16px; }
	.dz-card { padding: 18px; }
	.dz-matrix__ch { height: 104px; width: 26px; }
	.dz-matrix__c, .dz-matrix__self { width: 26px; height: 26px; font-size: 0.7rem; }
	.dz-matrix__rh { font-size: 0.66rem; padding-right: 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.dz-matrix__c { transition: none; }
	.dz-matrix__c:hover, .dz-matrix__c:focus-visible { transform: none; }
}


/* ── État « donnée non importée » ─────────────────────────────────────────
   Distinct de « risque inconnu » : Mixtures.info a une évaluation, elle
   n'est simplement pas encore reprise ici. Rendu volontairement neutre,
   jamais rassurant. */

.dz-card.risk-none { border-left-color: var(--accent-30); border-left-style: dashed; }

.dz-badge.risk-none .dz-badge__sym {
	background: repeating-linear-gradient(135deg,
		rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 6px), var(--bg);
	border: 1px solid var(--border-hi);
	color: var(--text-mid);
}

.dz-matrix__c.risk-none {
	background: repeating-linear-gradient(135deg,
		rgba(255, 255, 255, 0.11) 0 3px, transparent 3px 6px), rgba(255, 255, 255, 0.03);
	color: var(--text-lo);
}

.dz-legend__i.risk-none .dz-legend__sym {
	background: repeating-linear-gradient(135deg,
		rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 6px), var(--bg);
	border: 1px solid var(--border-hi);
	color: var(--text-mid);
}