/* ==========================================================
   MTP MEDICAMENTS
   Version 0.4.2
   ========================================================== */

.mtp-med {
	/*
	 * Variables propres au plugin avec pont optionnel vers TWAL.
	 * Les valeurs de secours conservent le rendu autonome du shortcode.
	 */
	--mtp-med-primary: var(--tw-section_title-color, var(--tw-color_primary, var(--tw-color-primary, #152e49)));
	--mtp-med-text: var(--tw-section_text-color, var(--tw-color_text, var(--tw-color-text, #1d2731)));
	--mtp-med-text-soft: var(--tw-color_muted, var(--tw-color-muted, #5b6875));
	--mtp-med-border: var(--tw-section_border-color, var(--tw-color_border, var(--tw-color-border, #dfe5ea)));
	--mtp-med-soft: var(--tw-section_inner-bg, var(--tw-color_soft, var(--tw-color-soft, #f6f8fa)));
	--mtp-med-card-bg: var(--tw-card_bg, var(--tw-card-bg, #fff));
	--mtp-med-field-bg: var(--tw-form-field_bg, #fff);
	--mtp-med-field-border: var(--tw-form-field_border-color, #cbd4dc);
	--mtp-med-field-radius: var(--tw-form-field_radius, 8px);
	--mtp-med-field-height: var(--tw-form-field_height, auto);
	--mtp-med-field-shadow: var(--tw-form-field_shadow, none);
	--mtp-med-button-bg: var(--tw-button_bg, var(--mtp-med-primary));
	--mtp-med-button-color: var(--tw-button_color, #fff);
	--mtp-med-button-radius: var(--tw-button_radius, var(--mtp-med-field-radius));
	--mtp-med-button-shadow: var(--tw-button_shadow, none);
	--mtp-med-radius: var(--tw-section_border-radius, 8px);

	max-width: 960px;
	margin: 40px auto;
	color: var(--mtp-med-text);
}

/* Intégration dans une section fournie par un constructeur externe. */
.mtp-med--embedded {
	margin-top: 0;
	margin-bottom: 0;
}

.mtp-med__intro {
	margin-bottom: 20px;
}

.mtp-med__title {
	margin: 0 0 6px;
	font-size: clamp(1.6rem, 3vw, 2.15rem);
	line-height: 1.2;
	color: var(--mtp-med-primary);
}

.mtp-med__intro-text {
	margin: 0;
	color: var(--mtp-med-text-soft);
}


/* ==========================================================
   1. RECHERCHE
   ========================================================== */

.mtp-med__field {
	display: flex;
	gap: 10px;
}

.mtp-med__input {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--mtp-med-field-border);
	border-radius: var(--mtp-med-field-radius);
	background: var(--mtp-med-field-bg);
	box-shadow: var(--mtp-med-field-shadow);
	min-height: var(--mtp-med-field-height);
	font: inherit;
	color: inherit;
}

.mtp-med__input:focus {
	outline: 2px solid rgba(21, 46, 73, 0.18);
	outline-offset: 1px;
	border-color: var(--mtp-med-primary);
}

.mtp-med__submit {
	padding: 14px 22px;
	border: 0;
	border-radius: var(--mtp-med-button-radius);
	background: var(--mtp-med-button-bg);
	color: var(--mtp-med-button-color);
	box-shadow: var(--mtp-med-button-shadow);
	min-height: var(--mtp-med-field-height);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.mtp-med__submit:disabled {
	cursor: wait;
	opacity: 0.65;
}

.mtp-med__message {
	min-height: 24px;
	margin-top: 12px;
	color: var(--mtp-med-text-soft);
}


/* ==========================================================
   2. RESULTATS
   ========================================================== */

.mtp-med__results-title {
	margin: 10px 0;
	font-size: 0.92rem;
	font-weight: 650;
	color: var(--mtp-med-text-soft);
}

.mtp-med__list {
	display: grid;
	gap: 10px;
}

.mtp-med__result-group {
	display: grid;
	gap: 6px;
}

.mtp-med__result {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	gap: 12px 24px;
	width: 100%;
	padding: 15px 18px;
	border: 1px solid var(--mtp-med-border);
	border-radius: var(--mtp-med-radius);
	background: var(--mtp-med-card-bg);
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.mtp-med__result:hover,
.mtp-med__result:focus-visible {
	border-color: #aebdca;
	background: var(--mtp-med-soft);
}

.mtp-med__result-content,
.mtp-med__result-side,
.mtp-med__result-name,
.mtp-med__result-meta,
.mtp-med__result-holder,
.mtp-med__result-status,
.mtp-med__result-cis,
.mtp-med__result-alternative-label {
	display: block;
}

.mtp-med__result-name {
	color: var(--mtp-med-primary);
}

.mtp-med__result-meta {
	margin-top: 5px;
	font-size: 0.9rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med__result-holder {
	margin-top: 3px;
	font-size: 0.8rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med__result-side {
	min-width: 112px;
	text-align: right;
}

.mtp-med__result-status {
	font-size: 0.78rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med__result-cis {
	margin-top: 4px;
	font-size: 0.74rem;
	font-variant-numeric: tabular-nums;
	color: var(--mtp-med-text-soft);
}

.mtp-med__result--alternative {
	margin-left: 24px;
	width: calc(100% - 24px);
	padding-top: 11px;
	padding-bottom: 11px;
	border-style: dashed;
	background: var(--mtp-med-soft);
	color: var(--mtp-med-text-soft);
}

.mtp-med__result--alternative:hover,
.mtp-med__result--alternative:focus-visible {
	background: var(--mtp-med-card-bg);
}

.mtp-med__result-alternative-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--mtp-med-primary);
}

.mtp-med__result--alternative .mtp-med__result-holder {
	margin-top: 3px;
}

.mtp-med__empty {
	padding: 16px 18px;
	border-radius: 8px;
	background: var(--mtp-med-soft);
}

.mtp-med__results-more {
	margin: 12px 0 0;
	font-size: 0.86rem;
	color: var(--mtp-med-text-soft);
}


/* ==========================================================
   3. FICHE MEDICAMENT
   ========================================================== */

.mtp-med-card {
	margin-top: 10px;
	border: 1px solid var(--mtp-med-border);
	border-radius: 12px;
	background: var(--mtp-med-card-bg);
	overflow: hidden;
}

.mtp-med-card__header,
.mtp-med-card__section,
.mtp-med-card__footer {
	padding: 24px clamp(18px, 4vw, 32px);
}

.mtp-med-card__header {
	background: var(--mtp-med-soft);
}

.mtp-med-card__back {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.9rem;
	color: var(--mtp-med-primary);
	cursor: pointer;
}

.mtp-med-card__name {
	margin: 0;
	max-width: 820px;
	font-size: clamp(1.45rem, 3vw, 2rem);
	line-height: 1.25;
	color: var(--mtp-med-primary);
}

.mtp-med-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 16px;
}

.mtp-med-card__chips span {
	padding: 5px 9px;
	border: 1px solid #d3dce3;
	border-radius: 999px;
	background: var(--mtp-med-card-bg);
	font-size: 0.82rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med-card__section {
	border-top: 1px solid var(--mtp-med-border);
}

.mtp-med-card__section h3 {
	margin: 0 0 18px;
	font-size: 1.15rem;
	color: var(--mtp-med-primary);
}

.mtp-med-card__composition {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.mtp-med-card__composition-item,
.mtp-med-card__presentation,
.mtp-med-card__generic {
	padding: 16px;
	border: 1px solid var(--mtp-med-border);
	border-radius: var(--mtp-med-radius);
	background: var(--mtp-med-card-bg);
}

.mtp-med-card__composition-item strong,
.mtp-med-card__composition-item span,
.mtp-med-card__generic strong,
.mtp-med-card__generic span {
	display: block;
}

.mtp-med-card__dosage {
	margin-top: 5px;
	font-weight: 650;
}

.mtp-med-card__muted,
.mtp-med-card__generic span {
	margin-top: 4px;
	font-size: 0.88rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med-card__presentations {
	display: grid;
	gap: 12px;
}

.mtp-med-card__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.mtp-med-card__facts--wide {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 0;
}

.mtp-med-card__fact {
	padding: 10px 12px;
	border-radius: 7px;
	background: var(--mtp-med-soft);
}

.mtp-med-card__fact span,
.mtp-med-card__fact strong {
	display: block;
}

.mtp-med-card__fact span {
	margin-bottom: 3px;
	font-size: 0.76rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med-card__fact strong {
	font-size: 0.9rem;
	font-weight: 650;
}

.mtp-med-card__reimbursement-note {
	margin: 12px 0 0;
	font-size: 0.88rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med-card__plain-list {
	margin: 0;
	padding-left: 20px;
}

.mtp-med-card__generic + .mtp-med-card__generic {
	margin-top: 8px;
}

.mtp-med-card__footer {
	border-top: 1px solid var(--mtp-med-border);
	background: var(--mtp-med-soft);
}

.mtp-med-card__source {
	margin: 0;
	font-size: 0.78rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med__disclaimer {
	margin: 18px 0 0;
	font-size: 0.82rem;
	color: var(--mtp-med-text-soft);
}


/* ==========================================================
   4. NOTICE OFFICIELLE
   La notice est placee en tete de fiche : action principale.
   ========================================================== */

.mtp-med-notice {
	background: var(--mtp-med-card-bg);
}

.mtp-med-notice__actions {
	display: grid;
	gap: 10px;
	justify-items: start;
}

.mtp-med-notice__load {
	padding: 11px 16px;
	border: 0;
	border-radius: var(--mtp-med-button-radius);
	background: var(--mtp-med-button-bg);
	color: var(--mtp-med-button-color);
	box-shadow: var(--mtp-med-button-shadow);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.mtp-med-notice__load:hover,
.mtp-med-notice__load:focus-visible {
	filter: brightness(.95);
}

.mtp-med-notice__load:disabled {
	cursor: wait;
	opacity: .65;
}

.mtp-med-notice__meta p {
	margin: 0 0 3px;
	font-size: .9rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med-notice__official-link {
	font-size: .86rem;
	color: var(--mtp-med-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mtp-med-notice__status {
	margin-top: 12px;
	font-size: .9rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med-notice__document {
	margin-top: 20px;
}

.mtp-med-notice__date {
	margin: 0 0 14px;
	font-size: .9rem;
	color: var(--mtp-med-text-soft);
}

.mtp-med-notice__intro {
	padding: 18px 20px;
	border-left: 3px solid var(--mtp-med-primary);
	border-radius: 0 8px 8px 0;
	background: var(--mtp-med-soft);
}

.mtp-med-notice__intro p:first-child {
	margin-top: 0;
}

.mtp-med-notice__intro p:last-child,
.mtp-med-notice__intro ul:last-child {
	margin-bottom: 0;
}

.mtp-med-notice__sections {
	display: grid;
	gap: 8px;
	margin-top: 18px;
}

.mtp-med-notice__section {
	border: 1px solid var(--mtp-med-border);
	border-radius: var(--mtp-med-radius);
	background: var(--mtp-med-card-bg);
	overflow: hidden;
}

.mtp-med-notice__section summary {
	position: relative;
	padding: 15px 46px 15px 16px;
	font-weight: 650;
	color: var(--mtp-med-primary);
	cursor: pointer;
	list-style: none;
}

.mtp-med-notice__section summary::-webkit-details-marker {
	display: none;
}

.mtp-med-notice__section summary::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	font-size: 1.25rem;
	font-weight: 400;
}

.mtp-med-notice__section[open] summary::after {
	content: '−';
}

.mtp-med-notice__section-body {
	padding: 0 18px 18px;
	border-top: 1px solid var(--mtp-med-border);
	line-height: 1.65;
}

.mtp-med-notice__section-body p,
.mtp-med-notice__section-body ul {
	margin: 14px 0 0;
}

.mtp-med-notice__section-body ul,
.mtp-med-notice__intro ul {
	padding-left: 22px;
}

.mtp-med-notice__source {
	margin: 16px 0 0;
	font-size: .8rem;
	color: var(--mtp-med-text-soft);
}


/* ==========================================================
   5. RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {
	.mtp-med-card__composition,
	.mtp-med-card__facts,
	.mtp-med-card__facts--wide {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.mtp-med__result--alternative {
		margin-left: 12px;
		width: calc(100% - 12px);
	}

	.mtp-med__field {
		display: grid;
	}

	.mtp-med__result {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.mtp-med__result-side {
		display: flex;
		gap: 10px;
		min-width: 0;
		text-align: left;
	}

	.mtp-med__result-cis {
		margin-top: 0;
	}

	.mtp-med-card__composition,
	.mtp-med-card__facts,
	.mtp-med-card__facts--wide {
		grid-template-columns: 1fr;
	}

	.mtp-med-notice__load {
		width: 100%;
	}
}