/*
 * Takouine — styles principaux.
 * Règle RTL : uniquement des propriétés logiques (inline-start/end, padding-inline…),
 * jamais left/right, pour que l'arabe fonctionne sans feuille séparée.
 * Couleurs : variables GeneratePress alimentées par takouine_palette() (inc/generatepress.php).
 */

:root {
	--tk-font: var(--wp--preset--font-family--outfit);
	--tk-radius: 14px;
	--tk-radius-pill: 999px;
	--tk-shadow: 0 1px 2px rgb(20 20 20 / 6%), 0 8px 24px rgb(14 64 88 / 8%);
	--tk-header-h: 72px;
	--tk-focus: 0 0 0 3px var(--base-3), 0 0 0 5px var(--accent);
	--tk-ease: cubic-bezier(.2, .7, .2, 1);
}

html[dir="rtl"] {
	--tk-font: var(--wp--preset--font-family--tajawal);
}

/* ---------- Base ---------- */

body,
button,
input,
select,
textarea {
	font-family: var(--tk-font);
}

body {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--contrast);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html[dir="rtl"] body {
	line-height: 1.8; /* l'arabe a besoin de plus d'interligne */
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tk-font);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--contrast);
}

html[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) {
	letter-spacing: 0; /* jamais d'espacement sur l'arabe (casse les ligatures) */
	line-height: 1.4;
}

h1 { font-size: var(--wp--preset--font-size--xx-large); }
h2 { font-size: var(--wp--preset--font-size--x-large); }
h3 { font-size: var(--wp--preset--font-size--large); }

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: none;
	box-shadow: var(--tk-focus);
	border-radius: 4px;
}

::selection {
	background: var(--mint);
	color: var(--contrast);
}

img {
	height: auto;
}

/* L'attribut hidden doit toujours l'emporter sur les display: flex / grid des composants */
[hidden] {
	display: none !important;
}

/* Les flèches directionnelles suivent le sens de lecture */
html[dir="rtl"] .tk-icon--arrow {
	transform: scaleX(-1);
}

/* ---------- Boutons ---------- */

.tk-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px; /* cible tactile */
	padding: 0.65em 1.4em;
	border: 2px solid transparent;
	border-radius: var(--tk-radius-pill);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--tk-ease), color .2s var(--tk-ease), border-color .2s var(--tk-ease), transform .2s var(--tk-ease);
}

.tk-btn:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* Menthe : toujours avec texte foncé (le blanc sur menthe ne passe pas AA) */
.tk-btn--primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--mint);
	color: var(--contrast);
}

.tk-btn--primary:hover,
.tk-btn--primary:focus-visible,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--mint-dark);
	color: var(--base-3);
}

.tk-btn--secondary {
	background-color: var(--accent);
	color: var(--base-3);
}

.tk-btn--secondary:hover {
	background-color: var(--petrol-dark);
	color: var(--base-3);
}

.tk-btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: var(--accent);
}

.tk-btn--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--base-3);
}

.tk-btn--whatsapp {
	background: var(--base-3);
	border-color: var(--contrast-3);
	color: var(--contrast);
}

.tk-btn--whatsapp .tk-icon {
	color: #1F8F4E; /* vert WhatsApp assombri : 4,1:1, élément graphique (3:1 requis) */
}

.tk-btn--whatsapp:hover {
	border-color: #1F8F4E;
	color: var(--contrast);
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-block-end: 1px solid var(--contrast-3);
	background: rgb(255 255 255 / 94%);
	backdrop-filter: saturate(1.4) blur(10px);
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0; /* la barre d'admin n'est pas fixe sur mobile */
	}
}

.site-header .inside-header {
	min-height: var(--tk-header-h);
	padding-block: 10px;
	padding-inline: 20px;
	gap: 16px;
}

.site-logo .header-image {
	width: auto;
	height: 54px; /* logo avec « smart learning hub » : rester lisible */
}

.main-navigation {
	background: transparent;
}

/* Sous-menu (« Autres services ») : fond plein, au-dessus du contenu des pages */
.main-navigation .main-nav ul ul {
	z-index: 100;
	min-width: 220px;
	background: var(--base-3);
}

@media (min-width: 1101px) {
	.main-navigation .main-nav ul ul {
		border: 1px solid var(--contrast-3);
	}
}

.main-navigation .main-nav ul li a {
	font-weight: 500;
	font-size: 0.975rem;
	padding-inline: 14px;
	line-height: var(--tk-header-h);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--accent);
	box-shadow: inset 0 -3px 0 var(--mint);
}

.main-navigation .main-nav ul ul {
	border-radius: var(--tk-radius);
	box-shadow: var(--tk-shadow);
	padding-block: 6px;
}

.main-navigation .main-nav ul ul li a {
	line-height: 1.4;
	padding-block: 10px;
}

.menu-bar-items {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-inline-start: 8px;
}

.tk-header-cta {
	min-height: 42px;
	padding-block: 0.5em;
	padding-inline: 1.1em;
	font-size: 0.95rem;
	white-space: nowrap;
}

.tk-header-cta__short {
	display: none;
}

/* Bouton menu mobile */
.main-navigation .menu-toggle {
	min-height: 44px;
	padding-inline: 12px;
	border-radius: 10px;
	color: var(--contrast);
	font-weight: 600;
}

@media (max-width: 768px) {
	:root { --tk-header-h: 64px; }

	.site-header .inside-header {
		padding-inline: 14px;
		gap: 8px;
	}

	.site-logo .header-image {
		height: 44px;
	}

	.tk-header-cta__long { display: none; }
	.tk-header-cta__short { display: inline; }

	.tk-header-cta {
		font-size: 0.875rem;
		padding-inline: 0.9em;
	}

}

/* Menu replié (burger) : même seuil que generate_mobile_menu_media_query (inc/generatepress.php) */
@media (max-width: 1100px) {
	.main-navigation.toggled .main-nav > ul {
		border-block-start: 1px solid var(--contrast-3);
	}

	.main-navigation .main-nav ul li a {
		line-height: 1.4;
		padding-block: 14px;
	}

	.main-navigation .main-nav ul li[class*="current-menu-"] > a {
		box-shadow: inset 3px 0 0 var(--mint);
	}

	html[dir="rtl"] .main-navigation .main-nav ul li[class*="current-menu-"] > a {
		box-shadow: inset -3px 0 0 var(--mint);
	}
}

/* Menu déplié (desktop) : une seule ligne */
@media (min-width: 1101px) {
	.main-navigation .main-nav ul li a {
		white-space: nowrap;
		padding-inline: 12px;
	}
}

@media (min-width: 1101px) and (max-width: 1280px) {
	.main-navigation .main-nav ul li a {
		padding-inline: 9px;
		font-size: 0.925rem;
	}

	.tk-header-cta__long { display: none; }
	.tk-header-cta__short { display: inline; }
}

@media (max-width: 420px) {
	/* Très petits écrans : la langue passe dans le footer et le menu */
	.menu-bar-items .tk-lang { display: none; }
}

/* Sélecteur de langue dans le menu : mobile uniquement */
.main-navigation .main-nav ul li.tk-menu-lang {
	display: none;
}

@media (max-width: 1100px) {
	.main-navigation .main-nav ul li.tk-menu-lang {
		display: block;
		padding-block: 14px;
		padding-inline: 20px;
		border-block-start: 1px solid var(--contrast-3);
	}

	/* La liste des langues n'est pas un sous-menu : neutralise les styles GeneratePress */
	.main-navigation .main-nav ul li.tk-menu-lang ul {
		position: static;
		display: flex;
		width: auto;
		height: auto;
		float: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: none;
		box-shadow: none;
		padding: 0;
		inset: auto;
	}

	.main-navigation .main-nav ul li.tk-menu-lang li {
		float: none;
		width: auto;
	}

	.main-navigation .main-nav ul li.tk-menu-lang a {
		display: inline;
		padding: 0;
		line-height: inherit;
		box-shadow: none;
	}
}

/* Landing pages : pas de menu principal */
.tk-is-landing .main-navigation .main-nav,
.tk-is-landing .menu-toggle {
	display: none !important;
}

/* ---------- Sélecteur de langue ---------- */

.tk-lang__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-lang--compact .tk-lang__list {
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--contrast-3);
	border-radius: var(--tk-radius-pill);
}

.tk-lang--compact .tk-lang__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 32px;
	padding-inline: 8px;
	border-radius: var(--tk-radius-pill);
	color: var(--contrast-2);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.tk-lang--compact .tk-lang__link[lang="ar"] {
	font-family: var(--wp--preset--font-family--tajawal);
	font-size: 0.9rem;
}

.tk-lang--compact .tk-lang__link:hover {
	background: var(--base);
	color: var(--accent);
}

.tk-lang--compact .tk-lang__link[aria-current] {
	background: var(--accent);
	color: var(--base-3);
}

.tk-lang--full {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tk-lang--full .tk-lang__list {
	gap: 4px 16px;
	flex-wrap: wrap;
}

.tk-lang--full .tk-lang__link {
	color: inherit;
	text-decoration: none;
}

.tk-lang--full .tk-lang__link[lang="ar"] {
	font-family: var(--wp--preset--font-family--tajawal);
}

.tk-lang--full .tk-lang__link:hover {
	text-decoration: underline;
}

.tk-lang--full .tk-lang__link[aria-current] {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--mint);
	text-decoration-thickness: 2px;
}

/* ---------- Contenu ---------- */

.one-container .site-content {
	padding: 0;
}

.one-container .inside-article {
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: 20px;
}

.entry-content > * + * {
	margin-block-start: 1.25em;
}

.tk-section--soft { background: var(--base); }
.tk-section--cream { background: var(--cream); }
.tk-section--petrol { background: var(--petrol-dark); color: var(--base-3); }
.tk-section--petrol :is(h1, h2, h3, h4, a:not(.tk-btn)) { color: var(--base-3); }

.tk-card {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--contrast-3);
	border-radius: var(--tk-radius);
	background: var(--base-3);
	box-shadow: var(--tk-shadow);
}

/* ---------- Footer ---------- */

.tk-footer {
	background: var(--petrol-dark);
	color: rgb(255 255 255 / 86%);
	font-size: 0.95rem;
}

.tk-footer a {
	color: var(--base-3);
	text-decoration: none;
}

.tk-footer a:hover {
	text-decoration: underline;
	text-decoration-color: var(--mint);
}

.tk-footer :focus-visible {
	box-shadow: 0 0 0 3px var(--mint);
}

.tk-footer__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

.tk-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 40px;
	padding-block: 56px 40px;
}

.tk-footer__logo img {
	width: auto;
	height: 52px;
}

.tk-footer__baseline {
	max-width: 34ch;
	margin-block: 16px 0;
	line-height: 1.6;
}

.tk-footer__title {
	margin-block: 0 14px;
	color: var(--base-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

html[dir="rtl"] .tk-footer__title {
	font-size: 1rem;
	letter-spacing: 0;
}

.tk-footer__menu,
.tk-footer__contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-footer__menu li + li,
.tk-footer__contact li + li {
	margin-block-start: 10px;
}

.tk-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.tk-footer__contact .tk-icon {
	flex: none;
	margin-block-start: 2px;
	color: var(--mint);
}

.tk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	padding-block: 20px;
	border-block-start: 1px solid rgb(255 255 255 / 14%);
	font-size: 0.875rem;
}

.tk-footer__copy {
	margin: 0;
	margin-inline-end: auto;
}

.tk-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-footer--light .tk-footer__bottom {
	border: 0;
}

@media (max-width: 960px) {
	.tk-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.tk-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.tk-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: 40px 28px;
	}

	.tk-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Bouton WhatsApp flottant ---------- */

.tk-float {
	position: fixed;
	inset-inline-end: 20px;
	inset-block-end: calc(20px + env(safe-area-inset-bottom));
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.tk-float__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 56px;
	height: 56px;
	padding-inline: 16px;
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	/* Liseré blanc : bouton visible aussi sur le footer bleu pétrole */
	box-shadow: 0 0 0 2px #fff, 0 6px 18px rgb(20 20 20 / 22%);
	transition: transform .2s var(--tk-ease), box-shadow .2s var(--tk-ease);
}

.tk-float__btn:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 0 0 2px #fff, 0 10px 24px rgb(20 20 20 / 26%);
}

.tk-float__btn .tk-icon {
	width: 26px;
	height: 26px;
}

/* Vert WhatsApp officiel foncé : icône blanche à 4,1:1, bouton visible sur fond blanc (WCAG 1.4.11) */
.tk-float__btn--wa {
	background: #128C7E;
}

.tk-float__btn--phone {
	display: none;
	width: 56px;
	padding: 0;
	background: var(--accent);
}

.tk-float__panel {
	position: absolute;
	inset-block-end: 70px;
	inset-inline-end: 0;
	width: min(320px, calc(100vw - 40px));
	display: grid;
	gap: 10px;
	padding: 20px;
	border-radius: var(--tk-radius);
	background: var(--base-3);
	color: var(--contrast);
	box-shadow: 0 12px 40px rgb(20 20 20 / 22%);
}

.tk-float__title {
	margin: 0;
	padding-inline-end: 28px;
	font-weight: 700;
}

.tk-float__text {
	margin: 0;
	color: var(--contrast-2);
	font-size: .95rem;
}

.tk-float__close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--contrast-2);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.tk-float__close:hover {
	background: var(--base);
	color: var(--contrast);
}

@media (max-width: 768px) {
	.tk-float {
		inset-inline-end: 14px;
		inset-block-end: calc(14px + env(safe-area-inset-bottom));
	}

	.tk-float__label {
		display: none;
	}

	.tk-float__btn--wa {
		width: 56px;
		padding: 0;
	}

	.tk-float__btn--phone {
		display: inline-flex;
	}

	/* Landing pages : la barre d'action du bas contient déjà WhatsApp et l'appel */
	.tk-is-landing .tk-float {
		display: none;
	}
}

/* ---------- Accessibilité / préférences ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-padding-top: calc(var(--tk-header-h) + 16px);
}