/* Merkez Al-Khalil — composants. Classes préfixées .mk-*, valeurs issues de tokens.css uniquement. */

/* ---------- Typographie ---------- */
.mk-display, .mk-h1, .mk-h2, .mk-h3 {
	font-family: var(--mk-font-serif);
	color: var(--mk-heading);
	font-weight: 500;
	line-height: var(--mk-lh-heading);
	letter-spacing: var(--mk-track-display);
	text-wrap: balance;
	margin: 0;
}
.mk-display { font-size: var(--mk-size-display); line-height: var(--mk-lh-display); }
.mk-h1 { font-size: var(--mk-size-h1); }
.mk-h2 { font-size: var(--mk-size-h2); }
.mk-h3 { font-size: var(--mk-size-h3); letter-spacing: 0; }
.mk-lede { font-family: var(--mk-font-sans); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--mk-ink-soft); max-width: 32em; text-wrap: pretty; }
.mk-read { font-family: var(--mk-font-serif); font-size: var(--mk-size-read); line-height: var(--mk-lh-read); color: var(--mk-text); max-width: var(--mk-measure); text-wrap: pretty; }
.mk-read > * + * { margin-top: .9em; }
.mk-read h2, .mk-read h3 { margin-top: 1.8em; }
.mk-meta { font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-muted); letter-spacing: .01em; }
.mk-ar { font-family: var(--mk-font-serif); font-size: var(--mk-size-ar); line-height: var(--mk-lh-ar); direction: rtl; unicode-bidi: isolate; }
.mk-ar-block { font-family: var(--mk-font-serif); font-size: calc(var(--mk-size-read) * 1.45); line-height: var(--mk-lh-ar); direction: rtl; text-align: right; color: var(--mk-ink); max-width: var(--mk-measure); margin-inline-start: auto; }
.mk-verse { font-family: var(--mk-font-quran); font-size: var(--mk-size-verse); line-height: 2.2; direction: rtl; text-align: center; color: var(--mk-blue); }
.mk-verse__ref { display: block; font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-muted); direction: ltr; margin-top: var(--mk-space-2); }
.mk-link { color: var(--mk-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-thickness var(--mk-dur-1) var(--mk-ease); }
.mk-link:hover { text-decoration-thickness: 2px; }
.mk-placeholder { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgb(168 50 31 / .06) 6px 12px); outline: 1px dashed var(--mk-error); color: var(--mk-error); padding: .1em .35em; font-family: var(--mk-font-sans); font-size: .9em; }

/* ---------- Bouton d'apparence lien (actions secondaires) ---------- */
button.mk-link-btn { padding: 0; min-height: var(--mk-touch); background: none; border: 0; font: 500 1rem var(--mk-font-sans); color: var(--mk-blue); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.mk-link-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--mk-focus); }

/* ---------- Boutons ---------- */
.mk-btn {
	--_bg: var(--mk-blue); --_fg: var(--mk-cream); --_bd: var(--mk-blue);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--mk-space-2);
	min-height: var(--mk-touch); padding: .75rem 1.375rem;
	font-family: var(--mk-font-sans); font-size: var(--mk-size-ui); font-weight: 500; line-height: 1.2;
	color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--mk-radius-pill);
	text-decoration: none; cursor: pointer;
	transition: background-color var(--mk-dur-1) var(--mk-ease), color var(--mk-dur-1) var(--mk-ease), border-color var(--mk-dur-1) var(--mk-ease), transform var(--mk-dur-1) var(--mk-ease);
}
.mk-btn:hover { --_bg: var(--mk-blue-deep); --_bd: var(--mk-blue-deep); }
.mk-btn:active { transform: translateY(1px); }
.mk-btn--lg { min-height: 52px; padding: .85rem 1.75rem; font-size: 1.0625rem; }
.mk-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--mk-focus); }
.mk-btn[disabled], .mk-btn[aria-disabled="true"] { --_bg: var(--mk-line); --_fg: var(--mk-muted); --_bd: var(--mk-line); cursor: not-allowed; transform: none; }
.mk-btn[aria-busy="true"] { cursor: progress; }
.mk-btn[aria-busy="true"]::after { content: ""; inline-size: 1em; block-size: 1em; border: 1.5px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: mk-spin .8s linear infinite; }
.mk-btn--ghost { --_bg: transparent; --_fg: var(--mk-blue); --_bd: var(--mk-blue); }
.mk-btn--ghost:hover { --_bg: var(--mk-blue-tint); --_fg: var(--mk-blue-deep); --_bd: var(--mk-blue-deep); }
.mk-btn--on-blue { --_bg: var(--mk-cream); --_fg: var(--mk-blue); --_bd: var(--mk-cream); }
.mk-btn--on-blue:hover { --_bg: var(--mk-white); --_bd: var(--mk-white); }
.mk-btn--on-blue:focus-visible { box-shadow: var(--mk-focus-on-blue); }
.mk-btn__arrow { inline-size: 1em; block-size: 1em; transition: transform var(--mk-dur-2) var(--mk-ease); }
.mk-btn:hover .mk-btn__arrow { transform: translateX(3px); }
[dir="rtl"] .mk-btn__arrow { transform: scaleX(-1); }
@keyframes mk-spin { to { transform: rotate(1turn); } }

/* ---------- Touches de choix (orientation, formules, disponibilités) ----------
   Une rangée qui ne se replie pas sans raison : états vide / choisi / actif lisibles. */
.mk-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--mk-space-2); border: 0; padding: 0; margin: 0; }
.mk-keys--row { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; }
.mk-key { position: relative; display: flex; }
.mk-key input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mk-key span {
	flex: 1; display: flex; align-items: center; gap: var(--mk-space-3);
	min-height: calc(var(--mk-touch) + 8px); padding: .75rem 1rem;
	font-family: var(--mk-font-sans); font-size: var(--mk-size-ui); line-height: 1.3; color: var(--mk-ink);
	background: var(--mk-paper); border: 1px solid var(--mk-line-strong); border-radius: var(--mk-radius);
	transition: background-color var(--mk-dur-1) var(--mk-ease), border-color var(--mk-dur-1) var(--mk-ease), color var(--mk-dur-1) var(--mk-ease);
}
.mk-key span::before { content: ""; flex: none; inline-size: .625rem; block-size: .625rem; border-radius: 50%; border: 1.5px solid var(--mk-line-strong); transition: background-color var(--mk-dur-1) var(--mk-ease), border-color var(--mk-dur-1) var(--mk-ease); }
.mk-key:hover span { border-color: var(--mk-blue); }
.mk-key input:checked + span { background: var(--mk-blue); border-color: var(--mk-blue); color: var(--mk-cream); }
.mk-key input:checked + span::before { background: var(--mk-saffron); border-color: var(--mk-saffron); }
.mk-key input:focus-visible + span { box-shadow: var(--mk-focus); }
.mk-key input:disabled + span { opacity: .55; cursor: not-allowed; }
.mk-keys--compact .mk-key span { justify-content: center; min-height: var(--mk-touch); padding: .5rem .25rem; font-size: var(--mk-size-small); }
.mk-keys--compact .mk-key span::before { display: none; }

/* ---------- Champs de formulaire ---------- */
.mk-field { display: grid; gap: var(--mk-space-2); }
.mk-label { font-family: var(--mk-font-sans); font-size: var(--mk-size-ui); font-weight: 500; color: var(--mk-ink); }
.mk-hint { font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-muted); }
.mk-input, .mk-select, .mk-textarea {
	inline-size: 100%; min-height: var(--mk-touch); padding: .7rem .9rem;
	font-family: var(--mk-font-sans); font-size: 1rem; color: var(--mk-ink);
	background: var(--mk-paper); border: 1px solid var(--mk-line-strong); border-radius: var(--mk-radius);
	transition: border-color var(--mk-dur-1) var(--mk-ease), box-shadow var(--mk-dur-1) var(--mk-ease);
}
.mk-textarea { min-height: 7rem; resize: vertical; }
.mk-input::placeholder, .mk-textarea::placeholder { color: var(--mk-muted); opacity: 1; }
.mk-input:hover, .mk-select:hover, .mk-textarea:hover { border-color: var(--mk-ink-soft); }
.mk-input:focus-visible, .mk-select:focus-visible, .mk-textarea:focus-visible { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--mk-blue); box-shadow: var(--mk-focus); }
.mk-field[data-invalid] .mk-input, .mk-input[aria-invalid="true"] { border-color: var(--mk-error); }
.mk-error { display: flex; gap: var(--mk-space-2); align-items: baseline; font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-error); }
.mk-error::before { content: ""; flex: none; inline-size: .5rem; block-size: .5rem; background: currentColor; transform: rotate(45deg) translateY(-1px); }

/* ---------- Progression d'étapes ---------- */
.mk-steps { display: flex; align-items: center; gap: var(--mk-space-3); font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-muted); }
.mk-steps__track { flex: 1; block-size: 2px; background: var(--mk-line); position: relative; overflow: hidden; }
.mk-steps__track > i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--mk-progress, 0%); background: var(--mk-blue); transition: inline-size var(--mk-dur-3) var(--mk-ease); }

/* ---------- Cartes ---------- */
.mk-programme { display: flex; flex-direction: column; overflow: hidden; background: var(--mk-white); border: 1px solid var(--mk-line); border-radius: var(--mk-radius-card); box-shadow: var(--mk-shadow-card); color: inherit; text-decoration: none; transition: transform var(--mk-dur-2) var(--mk-ease), box-shadow var(--mk-dur-2) var(--mk-ease), border-color var(--mk-dur-1) var(--mk-ease); }
.mk-programme:hover { transform: var(--mk-lift); box-shadow: var(--mk-shadow-lift); border-color: color-mix(in srgb, var(--mk-blue) 30%, var(--mk-line)); }
.mk-programme:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--mk-focus), var(--mk-shadow-lift); }
/* Bandeau : le nom arabe du programme sur champ bleu, avec un arc du cercle des lettres. */
.mk-programme__banner { position: relative; display: grid; place-items: center; min-height: 9rem; padding: var(--mk-space-5); overflow: hidden; background: var(--mk-blue); }
.mk-programme__banner::before, .mk-programme__banner::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--mk-cream) 22%, transparent); inset-inline-end: -5rem; top: 50%; translate: 0 -50%; inline-size: 14rem; block-size: 14rem; }
.mk-programme__banner::after { inline-size: 20rem; block-size: 20rem; inset-inline-end: -8rem; border-color: color-mix(in srgb, var(--mk-cream) 12%, transparent); }
.mk-programme__ar { position: relative; font-family: var(--mk-font-serif); font-size: clamp(1.75rem, 1.5rem + .8vw, 2.25rem); line-height: 1.5; color: var(--mk-cream); text-align: center; transition: transform var(--mk-dur-2) var(--mk-ease); }
.mk-programme:hover .mk-programme__ar { transform: scale(1.04); }
.mk-programme__body { flex: 1; display: flex; flex-direction: column; gap: var(--mk-space-2); padding: var(--mk-space-5) var(--mk-space-5) var(--mk-space-5); }
.mk-programme__name { font-family: var(--mk-font-serif); font-size: clamp(1.625rem, 1.45rem + .5vw, 1.9375rem); font-weight: 500; color: var(--mk-blue); line-height: 1.08; }
.mk-programme__promise { font-family: var(--mk-font-sans); font-size: 1rem; line-height: 1.55; color: var(--mk-ink-soft); }
.mk-programme__level { font-family: var(--mk-font-sans); font-size: .875rem; line-height: 1.45; color: var(--mk-muted); }
.mk-programme__level:empty { display: none; }
.mk-programme__price { margin-top: auto; padding-top: var(--mk-space-3); font-family: var(--mk-font-sans); font-size: .9375rem; color: var(--mk-ink); font-variant-numeric: tabular-nums; }
.mk-programme__more { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--mk-touch); margin-top: var(--mk-space-3); border-radius: var(--mk-radius-pill); background: var(--mk-blue); font-family: var(--mk-font-sans); font-size: 1rem; font-weight: 500; color: var(--mk-cream); transition: background-color var(--mk-dur-1) var(--mk-ease); }
.mk-programme:hover .mk-programme__more { background: var(--mk-blue-deep); }
.mk-programme:hover .mk-btn__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .mk-programme:hover, .mk-programme:hover .mk-programme__ar { transform: none; } }

.mk-entry { display: grid; gap: var(--mk-space-2); padding-block: var(--mk-space-5); border-top: var(--mk-hairline); color: inherit; text-decoration: none; }
.mk-entry__title { font-family: var(--mk-font-serif); font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); line-height: 1.12; color: var(--mk-ink); transition: color var(--mk-dur-1) var(--mk-ease); }
.mk-entry:hover .mk-entry__title { color: var(--mk-blue); }
.mk-entry:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--mk-focus); }
.mk-entry__scholar { font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-blue); font-weight: 500; }
.mk-entry[data-recent] .mk-entry__title { color: var(--mk-blue-deep); } /* encre la plus dense = le plus récent */
.mk-tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 .6rem; font-family: var(--mk-font-sans); font-size: .8125rem; color: var(--mk-blue); background: var(--mk-blue-tint); border-radius: var(--mk-radius); }

/* ---------- Citation ---------- */
.mk-quote { margin: 0; padding-inline-start: var(--mk-space-5); border-inline-start: 1px solid var(--mk-blue); }
.mk-quote p { font-family: var(--mk-font-serif); font-size: calc(var(--mk-size-read) * 1.1); line-height: 1.5; color: var(--mk-ink); margin: 0; }
.mk-quote cite { display: block; margin-top: var(--mk-space-3); font-family: var(--mk-font-sans); font-style: normal; font-size: var(--mk-size-small); color: var(--mk-muted); }

/* ---------- Lecteur audio ---------- */
.mk-audio { scroll-margin-top: calc(84px + var(--mk-space-4)); padding: var(--mk-space-4); background: var(--mk-paper); border: var(--mk-hairline); border-radius: var(--mk-radius); }
.mk-audio [hidden] { display: none !important; }
.mk-audio__native { display: block; inline-size: 100%; }
.mk-audio__ui { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mk-space-3) var(--mk-space-4); }
.mk-audio__ui > * { margin: 0; }
.mk-audio__now { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.mk-audio__notice:empty { display: none; }
.mk-audio__icon-pause, .is-playing > .mk-audio__ui .mk-audio__icon-play, .mk-episode.is-playing .mk-audio__icon-play { display: none; }
.is-playing > .mk-audio__ui .mk-audio__icon-pause, .mk-episode.is-playing .mk-audio__icon-pause { display: block; }
.mk-audio__notice { grid-column: 1 / -1; font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-ink-soft); }
.mk-audio--compact { padding: var(--mk-space-3); }
.mk-audio--compact .mk-audio__title { font-size: 1.125rem; }
.mk-audio__play { flex: none; inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--mk-blue); color: var(--mk-cream); cursor: pointer; transition: background-color var(--mk-dur-1) var(--mk-ease); }
.mk-audio__play:hover { background: var(--mk-blue-deep); }
.mk-audio__play:active { transform: translateY(1px); }
.mk-audio__play:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--mk-focus); }
.mk-audio__title { font-family: var(--mk-font-serif); font-size: 1.375rem; line-height: 1.15; color: var(--mk-ink); }
.mk-audio__time { font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-muted); font-variant-numeric: tabular-nums; }
.mk-audio .mk-audio__bar { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.mk-audio__bar { grid-column: 1 / -1; appearance: none; inline-size: 100%; block-size: var(--mk-touch); background: transparent; cursor: pointer; margin: calc(var(--mk-space-3) * -1) 0; }
.mk-audio__bar::-webkit-slider-runnable-track { block-size: 2px; background: linear-gradient(var(--mk-blue), var(--mk-blue)) 0 / var(--mk-played, 0%) 100% no-repeat, var(--mk-line); }
.mk-audio__bar::-moz-range-track { block-size: 2px; background: var(--mk-line); }
.mk-audio__bar::-moz-range-progress { block-size: 2px; background: var(--mk-blue); }
.mk-audio__bar::-webkit-slider-thumb { appearance: none; inline-size: 14px; block-size: 14px; margin-top: -6px; border-radius: 50%; background: var(--mk-saffron); border: 2px solid var(--mk-blue); }
.mk-audio__bar::-moz-range-thumb { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--mk-saffron); border: 2px solid var(--mk-blue); }
.mk-audio__bar:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--mk-focus); }
.mk-audio__tools { grid-column: 1 / -1; display: flex; gap: var(--mk-space-2); flex-wrap: wrap; }
.mk-audio__tool { min-height: var(--mk-touch); min-width: var(--mk-touch); padding: 0 .6rem; font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-blue); background: transparent; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); cursor: pointer; font-variant-numeric: tabular-nums; }
.mk-audio__tool:hover { border-color: var(--mk-blue); }
.mk-audio__tool:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--mk-focus); }

@media (prefers-reduced-motion: reduce) { .mk-steps__track > i { transition: none; } }

/* ---------- Formulaire Ressources gratuites ---------- */
.mk-resources { display: grid; gap: var(--mk-space-3); }
.mk-resources__title { font-family: var(--mk-font-serif); font-size: 1.625rem; line-height: 1.15; color: inherit; margin: 0; }
.mk-resources__row { display: flex; gap: var(--mk-space-2); }
.mk-resources__row input { flex: 1; min-width: 0; min-height: var(--mk-touch); padding: .7rem .9rem; font: 400 1rem var(--mk-font-sans); color: var(--mk-ink); background: var(--mk-paper); border: 1px solid var(--mk-line-strong); border-radius: var(--mk-radius); }
.mk-resources__row input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--mk-focus); }
.mk-resources__row button { min-height: var(--mk-touch); padding: 0 1.1rem; font: 500 1rem var(--mk-font-sans); color: var(--mk-cream); background: var(--mk-blue); border: 0; border-radius: var(--mk-radius); cursor: pointer; }
.mk-resources__row button:hover { background: var(--mk-blue-deep); }
.mk-resources__row button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--mk-focus); }
.mk-resources__row button:disabled { opacity: .6; cursor: progress; }
.mk-resources__consent { display: flex; gap: var(--mk-space-2); align-items: flex-start; font-family: var(--mk-font-sans); font-size: var(--mk-size-small); line-height: 1.45; }
.mk-resources__consent input { margin-top: .2em; inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
.mk-resources__msg { margin: 0; min-height: 1.4em; font-family: var(--mk-font-sans); font-size: var(--mk-size-small); }
.mk-resources.is-success .mk-resources__msg { color: var(--mk-success); }
.mk-resources.is-error .mk-resources__msg { color: var(--mk-error); }
.mk-on-blue .mk-resources.is-success .mk-resources__msg, .mk-on-blue .mk-resources.is-error .mk-resources__msg { color: var(--mk-cream); }

/* ---------- Champ bleu ---------- */
.mk-on-blue { background: var(--mk-blue); color: var(--mk-cream); }
.mk-on-blue .mk-display, .mk-on-blue .mk-h1, .mk-on-blue .mk-h2, .mk-on-blue .mk-h3 { color: var(--mk-cream); }
.mk-on-blue .mk-lede, .mk-on-blue .mk-meta { color: color-mix(in srgb, var(--mk-cream) 86%, var(--mk-blue)); }
.mk-on-blue a:not(.mk-btn) { color: var(--mk-cream); }
.mk-on-blue :focus-visible { box-shadow: var(--mk-focus-on-blue); }

/* ---------- Mise en page commune aux pages ---------- */
.mk-wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--mk-gutter); }
/* Kadence (thème classique) enveloppe le contenu des groupes : l'enveloppe ne doit pas compter dans la mise en page. */
.wp-block-group[class*="mk-"] > .wp-block-group__inner-container { display: contents; }
.mk-page { padding-block: var(--mk-section); }
.mk-page__intro { margin-block: var(--mk-space-5) var(--mk-space-8); }
.mk-page__section { padding-block: var(--mk-space-7); border-top: var(--mk-hairline); scroll-margin-top: calc(84px + var(--mk-space-4)); }
.mk-page__section .mk-h2 { margin: 0 0 var(--mk-space-5); }

/* ---------- Vidéo : façade (Bibliothèque, cours gratuits), l'iframe ne se charge qu'au clic ---------- */
.mk-video { display: grid; gap: var(--mk-space-2); }
.mk-video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--mk-blue-deep); border-radius: var(--mk-radius); overflow: hidden; }
.mk-video__frame iframe, .mk-video__thumb { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; }
.mk-video__play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; inline-size: 4.5rem; block-size: 4.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--mk-blue); color: var(--mk-cream); cursor: pointer; box-shadow: 0 0 0 6px color-mix(in srgb, var(--mk-cream) 30%, transparent); transition: background-color var(--mk-dur-1) var(--mk-ease); }
.mk-video__play svg { inline-size: 2rem; block-size: 2rem; margin-inline-start: 4px; }
.mk-video__play:hover { background: var(--mk-blue-deep); }
.mk-video__play:focus-visible { outline: 2px solid transparent; box-shadow: var(--mk-focus-on-blue); }
.mk-video__note { font-family: var(--mk-font-sans); font-size: var(--mk-size-small); color: var(--mk-muted); }