/*
Theme Name: Math'O karé
Theme URI: https://mathokare.mithril.re/
Author: Mithril Informatique
Description: Thème de blocs autonome pour Math'O karé — cours de mathématiques du lycée. Reprend la mise en page d'origine (contenu centré 1120 px, cadres noirs autour des figures, sommaire dépliable, fiches d'exercices en fenêtres) sans constructeur de pages.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: mathokare
*/

/* ============================================================
   1. Base
   ============================================================ */

:root {
	--mk-large: 1120px;
	--mk-encre: #111111;
	--mk-lien: #0073aa;
	--mk-bouton: #5bc0de;
	--mk-bordure: #9da5ae;
	--mk-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	--mk-serif: "Hoefler Text", Garamond, "Times New Roman", Times, serif;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
	-webkit-text-size-adjust: 100%;
}

body {
	background: #fff;
	color: var(--mk-encre);
	font-family: var(--mk-serif);
	font-size: 22px;
	line-height: 1.8;
}

/* La boîte que WordPress pose autour de chaque partie de gabarit ajoute la
   marge du block-gap : on la neutralise. */
.wp-site-blocks > .wp-block-template-part {
	display: contents;
}

.wp-site-blocks > main,
main.wp-block-group {
	margin-block-start: 0 !important;
}

img {
	height: auto;
	max-width: 100%;
}

/* WordPress pose margin-block-start: var(--wp--style--block-gap) sur « * + * »
   dans tout conteneur en flux : dans une grille ou une colonne, cela décale les
   cellules. On l'annule sur les conteneurs du thème. */
.mk-cols > *,
.mk-duo > *,
.mk-section > *,
.mk-pied__cols > *,
.mk-sommaire-liste > * {
	margin-block-start: 0 !important;
}

/* ============================================================
   2. En-tête : logo centré, menu horizontal centré
   ============================================================ */

.mk-entete {
	padding: 24px 20px 0;
	text-align: center;
}

.mk-entete__logo {
	margin: 0 auto 8px;
}

.mk-entete__logo img {
	width: 350px;
	max-width: 80vw;
	height: auto;
	display: inline-block;
}

.mk-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 34px;
	padding: 14px 0 20px;
}

.mk-nav a {
	color: var(--mk-lien);
	text-decoration: none;
	font-size: 19px;
	line-height: 1.4;
	white-space: nowrap;
}

.mk-nav a:hover,
.mk-nav a:focus {
	text-decoration: underline;
}

.mk-nav .current-menu-item > a,
.mk-nav .current_page_item > a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Menu mobile : bloc Navigation */
.wp-block-navigation.mk-nav .wp-block-navigation__container {
	gap: 10px 34px;
	justify-content: center;
}

.wp-block-navigation.mk-nav .wp-block-navigation-item__content {
	color: var(--mk-lien);
	font-size: 19px;
	text-decoration: none;
}

.wp-block-navigation.mk-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* Menu mobile : bouton discret centré, panneau blanc */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 8px 14px;
	color: var(--mk-encre);
}

.wp-block-navigation.mk-nav .wp-block-navigation__responsive-container-open {
	margin: 0 auto;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 40px 24px 24px;
	align-items: stretch;
}

.wp-block-navigation.mk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	align-items: stretch;
}

.wp-block-navigation.mk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #e2e2e2;
}

.wp-block-navigation.mk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 16px 2px;
	font-size: 22px;
}

.wp-block-navigation__responsive-container-close {
	top: 10px;
	right: 12px;
}

/* ============================================================
   3. Contenu
   ============================================================ */

.mk-contenu {
	max-width: var(--mk-large);
	margin-inline: auto;
	padding: 8px 20px 40px;
}

.mk-section {
	padding: 10px 0;
}

.mk-section > * + * {
	margin-block-start: 10px;
}

/* Colonnes (sections Elementor à plusieurs colonnes) */
.wp-block-columns.mk-cols,
.wp-block-columns.mk-duo {
	gap: 10px;
	align-items: stretch;
	margin-block-start: 10px;
}

.wp-block-columns.mk-cols > .wp-block-column,
.wp-block-columns.mk-duo > .wp-block-column {
	padding: 10px;
	min-width: 0;
}

/* Cadre noir autour d'une figure + son commentaire (bordure de colonne
   dans l'ancienne mise en page). */
.mk-cadre {
	border: 3px solid var(--mk-encre);
}

.mk-cadre > * + * {
	margin-block-start: 10px;
}

.mk-cadre img {
	display: block;
	margin-inline: auto;
}

/* Images */
.wp-block-image {
	margin: 10px 0;
}

.wp-block-image img {
	max-width: 100%;
	height: auto;
	display: block;
}

.wp-block-image.aligncenter {
	margin-inline: auto;
	text-align: center;
}

.wp-block-image.aligncenter img {
	margin-inline: auto;
}

/* Titre de page */
.mk-titre {
	margin: 0 0 4px;
}

.mk-titre-ligne {
	width: 60px;
	border-top: 1px solid var(--mk-encre);
	margin: 26px 0 10px;
}

.mk-categories {
	font-size: 16px;
	line-height: 1.6;
	color: var(--mk-encre);
	margin: 6px 0 26px;
}

.mk-categories a {
	color: var(--mk-lien);
	text-decoration: none;
	letter-spacing: .02em;
}

.mk-categories a:hover {
	text-decoration: underline;
}

/* Paragraphes, listes, tableaux */
.wp-block-post-content > p,
.wp-block-post-content .mk-section p {
	margin: 0 0 20px;
}

.wp-block-post-content ul,
.wp-block-post-content ol {
	margin: 0 0 20px;
	padding-left: 1.3em;
}

.wp-block-post-content li {
	margin-bottom: .35em;
}

.wp-block-post-content li > ul,
.wp-block-post-content li > ol {
	margin-top: .35em;
	margin-bottom: .35em;
}

.wp-block-post-content table {
	border-collapse: collapse;
	margin: 0 0 20px;
	max-width: 100%;
}

.wp-block-post-content td,
.wp-block-post-content th {
	border: 1px solid #d7d7d7;
	padding: 4px 10px;
	vertical-align: top;
}

.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5 {
	margin: 34px 0 12px;
}

.wp-block-post-content h3:first-child,
.wp-block-post-content h4:first-child {
	margin-top: 0;
}

/* ============================================================
   4. Boutons (les « pastilles » bleues ouvrent une fiche)
   ============================================================ */

.wp-block-buttons {
	margin: 10px 0 14px;
	gap: 10px;
}

.wp-block-button__link {
	background: var(--mk-bouton);
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: 15px 30px;
	font-family: var(--mk-serif);
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
	text-decoration: none;
	text-align: center;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: #31b0d5;
	color: #fff;
}

.wp-block-button.is-style-contour .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--mk-bouton);
	color: #2a92a8;
}

/* ============================================================
   5. Sommaire dépliable
   ============================================================ */

.mk-sommaire {
	border: 1px solid var(--mk-bordure);
	margin: 20px 0 30px;
	background: #fff;
}

.mk-sommaire > summary {
	list-style: none;
	cursor: pointer;
	padding: 20px;
	font-family: var(--mk-sans);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.3;
	border-bottom: 1px solid var(--mk-bordure);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.mk-sommaire > summary::-webkit-details-marker {
	display: none;
}

.mk-sommaire > summary::after {
	content: "⌄";
	font-size: 26px;
	line-height: 1;
	transform: translateY(-4px);
}

.mk-sommaire[open] > summary::after {
	content: "⌃";
}

.mk-sommaire-liste,
.mk-sommaire-liste ol {
	list-style: none;
	padding: 20px 24px 24px 30px;
	margin: 0 !important;
}

.mk-sommaire-liste ol {
	padding: 8px 0 8px 30px;
}

.mk-sommaire-liste > li {
	margin-bottom: .55em;
}

.mk-sommaire-liste ol > li {
	margin-bottom: .35em;
}

.mk-sommaire-liste li {
	margin-bottom: .5em;
}

.mk-sommaire-liste a {
	color: var(--mk-lien);
	text-decoration: none;
}

.mk-sommaire-liste a:hover {
	text-decoration: underline;
}

/* Les fenêtres de fiches (remplacement des popups Elementor) sont stylées et
   pilotées par le mu-plugin mathokare-popup.php, indépendant du thème. */

/* ============================================================
   7. Pied de page
   ============================================================ */

.mk-pied {
	border-top: 1px solid #e2e2e2;
	margin-top: 40px;
	padding: 30px 20px 40px;
	max-width: var(--mk-large);
	margin-inline: auto;
	font-size: 18px;
}

.mk-pied__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 60px;
	margin-block-start: 0 !important;
}

.mk-pied ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mk-pied li {
	margin-bottom: 8px;
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.mk-pied li::before {
	content: "▸";
	color: var(--mk-lien);
	font-size: 14px;
}

.mk-pied a {
	color: var(--mk-lien);
	text-decoration: none;
}

.mk-pied a:hover {
	text-decoration: underline;
}

.mk-pied__bas {
	text-align: center;
	margin-top: 26px;
	font-size: 16px;
	color: #333;
}

.mk-pied__bas img {
	max-width: 120px;
	height: auto;
	margin: 0 auto 10px;
	display: block;
}

.mk-pied__bas p {
	margin: 0;
}

/* ============================================================
   8. Archives et listes d'articles
   ============================================================ */

.mk-liste-articles {
	display: grid;
	gap: 4px;
}

.mk-liste-articles .wp-block-post-title {
	margin: 24px 0 4px;
	font-size: 26px;
}

.mk-liste-articles .wp-block-post-title a {
	color: var(--mk-lien);
	text-decoration: none;
}

.mk-liste-articles .wp-block-post-excerpt {
	font-size: 18px;
	line-height: 1.6;
}

.wp-block-query-pagination {
	margin-top: 34px;
	display: flex;
	gap: 18px;
	font-family: var(--mk-sans);
	font-size: 16px;
}

/* ============================================================
   9. Adaptations
   ============================================================ */

@media (max-width: 900px) {
	body {
		font-size: 20px;
	}
	.mk-entete__logo img {
		width: 260px;
	}
	.mk-nav a,
	.wp-block-navigation.mk-nav .wp-block-navigation-item__content {
		font-size: 17px;
	}
}

@media (max-width: 700px) {
	body {
		font-size: 19px;
	}
	.mk-contenu {
		padding: 8px 14px 30px;
	}
	/* Les colonnes côte à côte s'empilent */
	.wp-block-columns.mk-cols,
	.wp-block-columns.mk-duo {
		flex-wrap: wrap;
	}
	.wp-block-columns.mk-cols > .wp-block-column,
	.wp-block-columns.mk-duo > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.mk-pied__cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.mk-popup {
		padding: 16px 8px;
	}
	.mk-popup-boite {
		padding: 26px 18px 20px;
	}
	.mk-sommaire > summary {
		font-size: 21px;
		padding: 16px;
	}
	.mk-sommaire-liste {
		padding: 16px 16px 18px 34px;
	}
}