/*
Theme Name:        Mounir Maaroufi
Theme URI:          https://mounirmaaroufi.com/
Author:              Any In IT
Author URI:          https://anyinit.com/
Description:         Thème premium sur mesure pour le portfolio personnel de Mounir Maaroufi — Tech Lead Front-End Angular & AI Engineer. Compatible Elementor Pro, prêt pour le multilingue (FR/EN/AR + RTL).
Version:             1.6.18
Requires at least:   6.4
Tested up to:        6.7
Requires PHP:        8.2
License:             GPL-2.0-or-later
License URI:         https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:         mounir-maaroufi-theme
Tags:                custom-logo, custom-menu, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready

Ce fichier est chargé comme feuille de style principale (voir inc/enqueue.php).
Toutes les classes sont préfixées "mmt-" (Mounir Maaroufi Theme) pour éviter
toute collision avec Elementor, les plugins ou d'autres thèmes.
*/

/* ==========================================================================
   1. JETONS DE DESIGN (design tokens)
   ========================================================================== */

:root {
	/* Couleurs — noir profond/graphite + blanc cassé, accent repris du logo */
	--mmt-graphite: #0e1013;
	--mmt-graphite-2: #14171c;
	--mmt-graphite-3: #1b1f25;
	--mmt-paper: #f6f4ef;
	--mmt-paper-2: #ffffff;
	--mmt-ink: #14171a;
	--mmt-ink-secondary: #5b6169;
	--mmt-on-dark: #f6f4ef;
	--mmt-on-dark-secondary: #9aa0a6;
	--mmt-accent: #6c4ce0;
	--mmt-accent-2: #35c5eb;
	/* Accent lisible sur graphite : #6c4ce0 ne fait que 3,4:1 sur #0e1013 ;
	   cette teinte éclaircie atteint ≈ 8,9:1 (WCAG AA texte normal). */
	--mmt-accent-on-dark: #a893ff;
	--mmt-line-light: #e4e1d8;
	/* Bordures de composants d'interface (champs) : ≥ 3:1 sur blanc (WCAG 1.4.11). */
	--mmt-line-strong: #8a9096;
	--mmt-line-dark: rgba(246, 244, 239, 0.14);
	--mmt-danger: #b32d2e;

	/* Typographie */
	--mmt-font-display: "Space Grotesk", "Segoe UI", sans-serif;
	--mmt-font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
	--mmt-font-mono: "IBM Plex Mono", ui-monospace, monospace;

	/* Échelle d'espacement (8px base) */
	--mmt-space-1: 0.5rem;
	--mmt-space-2: 1rem;
	--mmt-space-3: 1.5rem;
	--mmt-space-4: 2rem;
	--mmt-space-5: 3rem;
	--mmt-space-6: 4rem;
	--mmt-space-7: 6rem;

	/* Rayons, ombres, durées */
	--mmt-radius-s: 10px;
	--mmt-radius-m: 16px;
	--mmt-radius-l: 20px;
	--mmt-radius-pill: 999px;
	--mmt-shadow-card: 0 1px 2px rgba(14, 16, 19, 0.04), 0 8px 24px rgba(14, 16, 19, 0.06);
	--mmt-shadow-lift: 0 20px 48px rgba(14, 16, 19, 0.16);
	--mmt-duration: 180ms;
	--mmt-container: 1240px;

	/*
	 * Système de motion — durées et easing centralisés (jamais de valeur
	 * "magique" dispersée dans le CSS). Reprend l'échelle recommandée pour
	 * une expérience premium : micro-interaction courte, révélation de
	 * section plus lente, aucune animation "cinématique" superflue sur un
	 * portfolio. Toute la mécanique respecte `prefers-reduced-motion`
	 * (section 1-bis ci-dessous) : rien ici n'est jamais la SEULE façon
	 * de comprendre ou d'utiliser une page.
	 */
	--mmt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--mmt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--mmt-motion-micro: 200ms;
	--mmt-motion-base: 360ms;
	--mmt-motion-section: 700ms;
	--mmt-reveal-stagger: 70ms;
}

/* ==========================================================================
   1-bis. TRANSITION DE PAGE NATIVE (progressive enhancement, coût zéro)
   ========================================================================== */

/*
 * View Transitions API multi-page : un fondu doux entre deux pages du
 * site dans les navigateurs qui la supportent (Chromium récents), sans
 * aucun JavaScript ni bibliothèque. Les navigateurs qui ne la connaissent
 * pas ignorent silencieusement cette règle — navigation strictement
 * identique à l'actuelle, aucune régression possible.
 */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ==========================================================================
   2. RESET DE BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--mmt-paper);
	color: var(--mmt-ink);
	font-family: var(--mmt-font-body);
	font-size: 100%; /* respecte la taille de police choisie dans le navigateur */
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	font-family: var(--mmt-font-display);
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

/* Respecte la préférence système "réduire les animations" (accessibilité) */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Focus visible clavier — jamais supprimé, seulement resylisé */
:focus-visible {
	outline: 2px solid var(--mmt-accent);
	outline-offset: 2px;
}

/* Lien d'évitement (accessibilité clavier) */
.mmt-skip-link {
	position: absolute;
	top: -100px;
	left: var(--mmt-space-2);
	z-index: 100;
	background: var(--mmt-accent);
	color: #fff;
	padding: var(--mmt-space-1) var(--mmt-space-2);
	border-radius: var(--mmt-radius-s);
	transition: top var(--mmt-duration) ease;
}

.mmt-skip-link:focus {
	top: var(--mmt-space-2);
}

/* Rend accessible au lecteur d'écran sans affichage visuel */
.mmt-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   2-bis. RÉVÉLATION AU DÉFILEMENT (progressive enhancement)
   ========================================================================== */

/*
 * `[data-reveal]` est appliqué en PHP sur les blocs qui méritent une
 * entrée en scène (sections, cartes projet, cartes d'expertise…).
 * Sans JavaScript ou avec `prefers-reduced-motion`, le contenu reste
 * immédiatement visible (aucune classe `.is-visible` n'est jamais requise
 * pour LIRE la page) : `main.js` ajoute seulement `.mmt-motion-ready` sur
 * <html> une fois l'Observer prêt, ce qui active l'état "caché avant
 * révélation" — un JS cassé ou désactivé n'entraîne donc jamais de
 * contenu invisible.
 */
html.mmt-motion-ready [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--mmt-motion-section) var(--mmt-ease-out),
		transform var(--mmt-motion-section) var(--mmt-ease-out);
	transition-delay: calc(var(--mmt-reveal-i, 0) * var(--mmt-reveal-stagger));
}

html.mmt-motion-ready [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html.mmt-motion-ready [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html.mmt-motion-ready .mmt-hero__title-word > span {
		transform: none;
		transition: none;
		transition-delay: 0s;
	}

	.mmt-hero__portrait,
	[data-magnetic] {
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   3. MISE EN PAGE
   ========================================================================== */

.mmt-container {
	width: 100%;
	max-width: var(--mmt-container);
	margin-inline: auto;
	padding-inline: var(--mmt-space-3);
}

.mmt-section {
	padding-block: var(--mmt-space-6);
}

.mmt-section--dark {
	background: var(--mmt-graphite);
	color: var(--mmt-on-dark);
}

.mmt-section--tight {
	padding-block: var(--mmt-space-4);
}

.mmt-section--muted {
	background: var(--mmt-paper-2);
	border-block: 1px solid var(--mmt-line-light);
}

.mmt-eyebrow {
	display: inline-block;
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mmt-accent);
	margin-bottom: var(--mmt-space-2);
}

.mmt-section--dark .mmt-eyebrow,
.mmt-section--dark .mmt-card__eyebrow,
.mmt-timeline-widget--dark .mmt-eyebrow,
.mmt-expertise-widget--dark .mmt-eyebrow {
	color: var(--mmt-accent-on-dark);
}

/* Repère éditorial réutilisable (même principe que .mmt-hero__subtitle) :
   un trait court avant le libellé, pour donner du poids aux titres de
   section sans dupliquer le style du Hero. Modificateur optionnel — ne
   change rien pour les .mmt-eyebrow existants qui ne le portent pas. */
.mmt-eyebrow--rule {
	display: inline-flex;
	align-items: center;
	gap: var(--mmt-space-2);
}

.mmt-eyebrow--rule::before {
	content: '';
	display: inline-block;
	width: 2rem;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}

/* Titres des sections de la home (voir front-page.php) : une échelle
   au-dessus de .mmt-entry__title (réservé aux articles/pages) pour créer
   un vrai rythme éditorial entre les blocs de la page d'accueil. */
.mmt-home-section__title {
	font-size: clamp(2rem, 1.4vw + 1.6rem, 3.25rem);
	letter-spacing: -0.01em;
	max-width: 20ch;
}

.mmt-grid {
	display: grid;
	gap: var(--mmt-space-3);
}

.mmt-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mmt-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mmt-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.mmt-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mmt-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.mmt-grid--2,
	.mmt-grid--3,
	.mmt-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

/* Le collant est porté par le <header> (un élément sticky ne peut pas
   dépasser la boîte de son parent : posé sur .mmt-nav seule, il ne
   fonctionnait jamais — audit v1.5.0 P1). */
.mmt-header {
	position: sticky;
	top: 0;
	z-index: 40;
	/* Fond et flou portés par le <header> pleine largeur (la nav elle-même
	   est un conteneur 1240 px : le fond ne doit pas s'arrêter à ses bords). */
	background: rgba(246, 244, 239, 0.92);
	-webkit-backdrop-filter: saturate(140%) blur(6px);
	backdrop-filter: saturate(140%) blur(6px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--mmt-motion-base) var(--mmt-ease-out), box-shadow var(--mmt-motion-base) var(--mmt-ease-out);
}

.mmt-header:has(.mmt-nav.is-scrolled) {
	border-color: var(--mmt-line-light);
	box-shadow: 0 1px 0 rgba(14, 16, 19, 0.02), 0 12px 24px -16px rgba(14, 16, 19, 0.18);
}

body.admin-bar .mmt-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .mmt-header {
		top: 46px;
	}
}

.mmt-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mmt-space-2);
	padding-block: var(--mmt-space-2);
	transition: padding var(--mmt-motion-base) var(--mmt-ease-out);
}

/* État "contracté" ajouté par main.js après un léger défilement — pur
   confort visuel (la nav reste utilisable identiquement sans JS). */
.mmt-nav.is-scrolled {
	padding-block: 10px;
}

.mmt-nav__brand {
	font-family: var(--mmt-font-display);
	font-weight: 600;
	font-size: 1rem;
}

.mmt-nav__brand a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
}

.mmt-nav__brand img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Nom affiché en texte réel à côté du monogramme (plus seulement pour
   lecteur d'écran) : une page interne doit rester identifiable même sans
   revenir à l'accueil. Repli : masqué sous 380px pour laisser la place à
   la bascule du menu mobile, et déjà répété juste en dessous dans le pied
   de page (.mmt-footer__name) — pas de doublon visuel à cet endroit. */
.mmt-nav__logo-text {
	white-space: nowrap;
}

.mmt-footer__brand .mmt-nav__logo-text {
	display: none;
}

@media (max-width: 380px) {
	.mmt-nav__logo-text {
		display: none;
	}
}

.mmt-nav__links {
	display: flex;
	align-items: center;
	gap: var(--mmt-space-3);
}

.mmt-nav__list {
	display: flex;
	align-items: center;
	gap: var(--mmt-space-3);
}

.mmt-nav__links a {
	font-size: 0.875rem;
	transition: color var(--mmt-duration) ease;
}

.mmt-nav__links a:hover,
.mmt-nav__links a:focus-visible {
	color: var(--mmt-accent);
}

.mmt-nav__links a[aria-current="page"] {
	color: var(--mmt-accent);
	font-weight: 600;
}

.mmt-nav__toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-s);
	padding: 8px 10px;
}

@media (max-width: 860px) {
	.mmt-nav__links {
		position: fixed;
		inset-inline: 0;
		top: 64px;
		flex-direction: column;
		align-items: flex-start;
		background: var(--mmt-paper-2);
		border-bottom: 1px solid var(--mmt-line-light);
		padding: var(--mmt-space-3);
		gap: var(--mmt-space-2);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden; /* retire aussi les liens de l'ordre de tabulation et de l'arbre d'accessibilité */
		pointer-events: none;
		transition: opacity var(--mmt-duration) ease, transform var(--mmt-duration) ease, visibility 0s linear var(--mmt-duration);
	}

	.mmt-nav__links.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition-delay: 0s;
	}

	.mmt-nav__toggle {
		display: inline-flex;
	}

	.mmt-nav__list {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
}

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */

.mmt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: var(--mmt-radius-pill);
	border: 1px solid transparent;
	min-height: 44px;
	transition: opacity var(--mmt-duration) ease, border-color var(--mmt-duration) ease, color var(--mmt-duration) ease;
}

.mmt-btn--primary {
	background: var(--mmt-accent);
	color: #fff;
}

.mmt-btn--primary:hover,
.mmt-btn--primary:focus-visible {
	opacity: 0.88;
}

.mmt-btn--light {
	background: var(--mmt-paper-2);
	color: var(--mmt-graphite);
}

.mmt-btn--outline-dark {
	border-color: var(--mmt-line-dark);
	color: var(--mmt-on-dark);
}

.mmt-btn--outline-dark:hover,
.mmt-btn--outline-dark:focus-visible {
	border-color: var(--mmt-accent-on-dark);
	color: var(--mmt-accent-on-dark);
}

.mmt-btn--outline-light {
	border-color: var(--mmt-ink);
	color: var(--mmt-ink);
}

.mmt-btn--outline-light:hover,
.mmt-btn--outline-light:focus-visible {
	border-color: var(--mmt-accent);
	color: var(--mmt-accent);
}

.mmt-btn--ghost {
	padding-inline: 4px;
}

/*
 * Micro-interaction "magnétique" — le bouton suit très légèrement le
 * curseur (amplitude plafonnée à quelques pixels par main.js). Purement
 * décoratif et désactivé par main.js sur écran tactile et en
 * `prefers-reduced-motion` : jamais la seule façon d'atteindre un CTA.
 */
[data-magnetic] {
	transform: translate(var(--mmt-mx, 0), var(--mmt-my, 0));
	transition: transform var(--mmt-motion-micro) var(--mmt-ease-out);
	will-change: transform;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

/*
 * Composition asymétrique intentionnelle (direction "THE MOUNIR DIGITAL
 * UNIVERSE") : la colonne de contenu domine la grille, le portrait déborde
 * du cadre pour créer une tension visuelle au lieu d'un 50/50 statique.
 * `align-items: end` ancre le duo titre/portrait sur une même ligne de base
 * plutôt qu'un centrage mou.
 */
.mmt-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
	align-items: end;
	gap: var(--mmt-space-6);
	padding-block: var(--mmt-space-7) var(--mmt-space-6);
	min-height: min(78vh, 760px);
}

.mmt-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--mmt-space-2);
	padding-bottom: var(--mmt-space-4);
}

.mmt-hero__title {
	font-size: clamp(2.75rem, 3vw + 2.6rem, 7.25rem);
	/* 1.08 (et non < 1) : chaque mot est enveloppé par un span
	   overflow:hidden pour le masque de révélation cinétique — une
	   line-height trop serrée rogne le haut des majuscules/ascendantes à
	   cette échelle. Vérifié visuellement en contexte réel (Elementor,
	   staging) après un premier réglage à 0.98 qui coupait le "M". */
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--mmt-on-dark);
	max-width: 15ch;
}

/*
 * Révélation cinétique du H1 : chaque mot est enveloppé par PHP
 * (template-parts/hero.php) dans deux <span> imbriqués — l'extérieur
 * masque le débordement, l'intérieur translate depuis le bas. Sans JS
 * (pas de classe .mmt-motion-ready sur <html>), les mots s'affichent
 * normalement : ceci n'est qu'une amélioration progressive du chargement
 * initial, jamais une condition pour lire le titre.
 */
.mmt-hero__title-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.mmt-hero__title-word > span {
	display: inline-block;
}

html.mmt-motion-ready .mmt-hero__title-word > span {
	transform: translateY(115%);
	transition: transform var(--mmt-motion-section) var(--mmt-ease-out);
	transition-delay: calc(var(--mmt-reveal-i, 0) * 55ms);
}

html.mmt-motion-ready .mmt-hero--revealed .mmt-hero__title-word > span {
	transform: translateY(0);
}

/* Éditorial : un repère horizontal court avant le sous-titre, comme une
   légende de magazine — remplace le "juste un peu de texte au-dessus"
   par un vrai signal de hiérarchie. */
.mmt-hero__subtitle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--mmt-space-2);
	font-family: var(--mmt-font-display);
	font-size: clamp(0.95rem, 1vw + 0.6rem, 1.15rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mmt-accent-on-dark); /* sur graphite : 8,9:1 (audit P1) */
}

.mmt-hero__subtitle::before {
	content: '';
	display: inline-block;
	width: 2.5rem;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}

.mmt-hero__lede {
	max-width: 46ch;
	color: var(--mmt-on-dark-secondary);
	font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
	margin-top: var(--mmt-space-1);
}

.mmt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mmt-space-2);
	margin-top: var(--mmt-space-3);
}

/* Fiche projet : l'image mise en avant chevauche le bas de l'en-tête sombre.
   L'en-tête reçoit un padding-bas équivalent pour que le chevauchement ne
   recouvre jamais les boutons ; l'image est recadrée (jamais déformée). */
.mmt-project-header--has-media {
	padding-bottom: calc(var(--mmt-space-5) + var(--mmt-space-5));
}

.mmt-project-media {
	margin-top: calc(-1 * var(--mmt-space-5));
}

.mmt-project-media__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--mmt-radius-l);
	border: 1px solid var(--mmt-accent);
	box-shadow: var(--mmt-shadow-lift);
}

/* Le portrait embarqué est servi via <picture> (WebP + JPEG) : l'élément
   <picture> occupe la seconde colonne de la grille et déborde volontairement
   du conteneur (justify-self:end + largeur > colonne) pour casser la
   symétrie ; un cadre accent en second plan (box-shadow décalé, pas un
   pseudo-élément séparé car l'image peut être un <picture> ou un <img>
   selon la source) donne de la profondeur sans poids supplémentaire. */
.mmt-hero > picture {
	display: block;
	justify-self: end;
}

.mmt-hero__portrait {
	width: min(30vw, 420px);
	height: clamp(380px, 34vw, 520px);
	object-fit: cover;
	border-radius: var(--mmt-radius-l) var(--mmt-radius-l) var(--mmt-radius-l) 0;
	border: 1px solid var(--mmt-accent);
	box-shadow:
		-18px 18px 0 0 var(--mmt-accent),
		var(--mmt-shadow-lift);
	/* --mmt-tilt-x/--mmt-tilt-y : léger suivi de souris ; --mmt-parallax-y :
	   décalage au défilement. Les trois sont fixées et bornées par
	   main.js (desktop uniquement, jamais en prefers-reduced-motion). */
	transform: perspective(1000px) rotateX(var(--mmt-tilt-x, 0deg)) rotateY(var(--mmt-tilt-y, 0deg)) translateY(var(--mmt-parallax-y, 0px));
	transition: transform var(--mmt-motion-base) var(--mmt-ease-out);
	will-change: transform;
}

@media (max-width: 860px) {
	.mmt-hero {
		grid-template-columns: 1fr;
		min-height: 0;
		text-align: center;
		padding-block: var(--mmt-space-5) var(--mmt-space-4);
	}

	.mmt-hero > picture {
		grid-row: 1;
		justify-self: center;
	}

	.mmt-hero__content {
		grid-row: 2;
		align-items: center;
		padding-bottom: 0;
	}

	.mmt-hero__title {
		max-width: none;
	}

	.mmt-hero__subtitle::before {
		display: none;
	}

	.mmt-hero__lede {
		max-width: none;
	}

	.mmt-hero__actions {
		justify-content: center;
	}

	.mmt-hero__portrait {
		width: 220px;
		height: 260px;
		border-radius: var(--mmt-radius-l);
		box-shadow:
			-10px 10px 0 0 var(--mmt-accent),
			var(--mmt-shadow-lift);
	}
}

.mmt-stat-strip {
	/* Flexbox plutôt qu'une grille à colonnes fixes : le nombre
	   d'indicateurs varie de 1 à 4 (voir mmt_get_hero_stats(), qui
	   n'inclut que les paires label/valeur complètes) et ne doit
	   jamais laisser de case vide visible. */
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var(--mmt-line-dark);
	border-radius: 14px;
	overflow: hidden;
}

.mmt-stat-strip__item {
	flex: 1 1 160px;
	background: var(--mmt-graphite-2);
	padding: var(--mmt-space-2) var(--mmt-space-3);
}

.mmt-stat-strip__label {
	font-family: var(--mmt-font-mono);
	font-size: 0.6875rem;
	color: var(--mmt-on-dark-secondary);
}

.mmt-stat-strip__value {
	font-size: 0.875rem;
	color: var(--mmt-on-dark);
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
	.mmt-stat-strip__item {
		flex-basis: 45%;
	}
}

/* ==========================================================================
   7. CARTES (projets, expertise, entrepreneuriat)
   ========================================================================== */

.mmt-card {
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-m);
	background: var(--mmt-paper-2);
	padding: var(--mmt-space-3);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mmt-card__eyebrow {
	font-family: var(--mmt-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mmt-accent);
}

.mmt-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--mmt-radius-m);
	background: var(--mmt-paper);
	color: var(--mmt-accent);
}

.mmt-card__icon-svg {
	width: 22px;
	height: 22px;
}

.mmt-card__title {
	font-family: var(--mmt-font-display);
	font-size: 1.125rem;
	font-weight: 600;
}

.mmt-card__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--mmt-ink-secondary);
}

.mmt-card--draft {
	border-style: dashed;
	border-color: #c9cdd3;
	background: #fbfaf7;
	color: var(--mmt-ink-secondary);
}

.mmt-card--link {
	text-decoration: none;
	color: inherit;
	transition: transform var(--mmt-motion-base) var(--mmt-ease-out), box-shadow var(--mmt-motion-base) var(--mmt-ease-out), border-color var(--mmt-motion-base) var(--mmt-ease-out);
}

.mmt-card--link:hover,
.mmt-card--link:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--mmt-shadow-lift);
	border-color: var(--mmt-accent);
}

.mmt-card__link {
	margin-top: auto;
	font-family: var(--mmt-font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mmt-accent);
}

.mmt-project-card {
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-m);
	overflow: hidden;
	background: var(--mmt-paper-2);
	display: flex;
	flex-direction: column;
	transition: transform var(--mmt-motion-base) var(--mmt-ease-out), box-shadow var(--mmt-motion-base) var(--mmt-ease-out), border-color var(--mmt-motion-base) var(--mmt-ease-out);
}

.mmt-project-card:hover,
.mmt-project-card:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--mmt-shadow-lift);
	border-color: var(--mmt-line-light);
}

.mmt-project-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mmt-graphite-3);
}

.mmt-project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--mmt-ease-out);
}

.mmt-project-card:hover .mmt-project-card__media img,
.mmt-project-card:focus-within .mmt-project-card__media img {
	transform: scale(1.06);
}

.mmt-project-card__link {
	font-size: 0.8125rem;
	font-weight: 600;
	margin-top: 6px;
	position: relative;
	display: inline-flex;
	width: fit-content;
}

.mmt-project-card__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mmt-motion-base) var(--mmt-ease-out);
}

.mmt-project-card:hover .mmt-project-card__link::after,
.mmt-project-card:focus-within .mmt-project-card__link::after {
	transform: scaleX(1);
}

.mmt-project-card__body {
	padding: var(--mmt-space-2) var(--mmt-space-3) var(--mmt-space-3);
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.mmt-project-card__category {
	font-family: var(--mmt-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mmt-accent);
}

.mmt-project-card__title {
	font-family: var(--mmt-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
}

.mmt-project-card__excerpt {
	font-size: 0.875rem;
	color: var(--mmt-ink-secondary);
	flex: 1;
}

/* Grille "bento" pour la vitrine de projets (widget Elementor "Grille de
   projets" / shortcode [mmc_projects], scopée à .mmc-shortcode-projects —
   n'affecte ni l'archive du portfolio ni "Projets similaires", qui gardent
   une grille neutre en colonnes égales). Une seule carte joue le rôle
   d'ancre visuelle au lieu de N vignettes de poids identique : la
   direction "THE PROJECT CONSTELLATION" du portfolio. */
@media (min-width: 700px) {
	.mmc-shortcode-projects.mmt-grid--3 > .mmt-project-card:first-child,
	.mmc-shortcode-projects.mmt-grid--4 > .mmt-project-card:first-child {
		grid-column: span 2;
	}

	.mmc-shortcode-projects.mmt-grid--3 > .mmt-project-card:first-child .mmt-project-card__media,
	.mmc-shortcode-projects.mmt-grid--4 > .mmt-project-card:first-child .mmt-project-card__media {
		aspect-ratio: 16 / 8;
	}

	.mmc-shortcode-projects.mmt-grid--3 > .mmt-project-card:first-child .mmt-project-card__title,
	.mmc-shortcode-projects.mmt-grid--4 > .mmt-project-card:first-child .mmt-project-card__title {
		font-size: 1.375rem;
	}
}

/* ==========================================================================
   8. ÉTIQUETTES / TAGS
   ========================================================================== */

.mmt-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-pill);
	padding: 6px 14px;
}

.mmt-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ==========================================================================
   8-bis. MARQUEE TECHNOLOGIES (données réelles de la taxonomie)
   ========================================================================== */

/*
 * Défilement horizontal continu des technologies réellement utilisées
 * dans le portfolio (template-parts/tech-marquee.php). Le contenu est
 * dupliqué une fois en PHP pour une boucle parfaitement continue ; la
 * copie est marquée aria-hidden pour ne pas doubler la liste au clavier
 * ou au lecteur d'écran. Pause au survol/focus, désactivé en
 * prefers-reduced-motion (repli : liste simple en retour à la ligne).
 */
.mmt-marquee {
	display: flex;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mmt-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--mmt-space-3);
	width: max-content;
	animation: mmt-marquee-scroll 32s linear infinite;
}

.mmt-marquee:hover .mmt-marquee__track,
.mmt-marquee:focus-within .mmt-marquee__track {
	animation-play-state: paused;
}

.mmt-marquee__item {
	font-family: var(--mmt-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--mmt-ink-secondary); /* 5,7:1 sur blanc cassé (était #9aa0a6 : 2,4:1) */
	border: 1px solid var(--mmt-line-strong);
	border-radius: var(--mmt-radius-pill);
	padding: 8px 18px;
}

.mmt-section--dark .mmt-marquee__item {
	color: var(--mmt-on-dark-secondary); /* 7,2:1 sur graphite */
	border-color: var(--mmt-line-dark);
}

/* RTL : la piste défile toujours dans le même sens physique (sinon elle
   s'étend hors écran et provoque un défilement horizontal — audit P1). */
.mmt-marquee {
	direction: ltr;
}

[dir="rtl"] .mmt-marquee__item {
	direction: rtl;
}

@keyframes mmt-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmt-marquee {
		display: block;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mmt-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		transform: none;
	}

	.mmt-marquee__track[aria-hidden="true"] {
		display: none;
	}
}

.mmt-tag.is-active {
	background: var(--mmt-accent);
	border-color: var(--mmt-accent);
	color: #fff;
}

a.mmt-tag {
	transition: border-color var(--mmt-duration) ease, background var(--mmt-duration) ease, color var(--mmt-duration) ease;
}

a.mmt-tag:hover,
a.mmt-tag:focus-visible {
	border-color: var(--mmt-accent);
}

/* ==========================================================================
   8-ter. PORTFOLIO : FILTRES, FIL D'ARIANE, NAVIGATION PROJET
   ========================================================================== */

.mmt-portfolio__filters {
	display: flex;
	flex-direction: column;
	gap: var(--mmt-space-2);
	margin-bottom: var(--mmt-space-4);
}

.mmt-portfolio__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.mmt-portfolio__tool {
	display: inline-flex;
}

.mmt-portfolio__tool--search {
	flex: 1 1 240px;
}

.mmt-portfolio__select,
.mmt-portfolio__search {
	font: inherit;
	font-family: var(--mmt-font-mono);
	font-size: 0.8125rem;
	padding: 9px 14px;
	border: 1px solid var(--mmt-line-strong);
	border-radius: var(--mmt-radius-pill);
	background: var(--mmt-paper-2);
	color: var(--mmt-ink);
	width: 100%;
	min-height: 40px;
}

.mmt-portfolio__select:focus-visible,
.mmt-portfolio__search:focus-visible {
	outline: 2px solid var(--mmt-accent);
	outline-offset: 2px;
	border-color: var(--mmt-accent);
}

.mmt-portfolio__status {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	color: var(--mmt-ink-secondary);
	min-height: 1.2em;
	margin: 0 0 var(--mmt-space-2);
}

.mmt-portfolio.is-loading .mmt-portfolio__grid {
	opacity: 0.55;
	transition: opacity var(--mmt-motion-micro) ease;
}

.mmt-portfolio__pagination {
	margin-top: var(--mmt-space-4);
}

.mmt-portfolio__more {
	display: inline-flex;
}

.mmt-breadcrumbs {
	margin-bottom: var(--mmt-space-2);
}

.mmt-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	color: var(--mmt-on-dark-secondary);
}

.mmt-breadcrumbs li + li::before {
	content: "/";
	margin-inline-end: 6px;
	opacity: 0.6;
}

.mmt-breadcrumbs a:hover,
.mmt-breadcrumbs a:focus-visible {
	color: var(--mmt-accent-2);
}

.mmt-project-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mmt-space-2);
	margin-top: var(--mmt-space-4);
}

.mmt-project-nav__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--mmt-space-2) var(--mmt-space-3);
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-m);
	background: var(--mmt-paper-2);
	transition: border-color var(--mmt-motion-micro) ease, transform var(--mmt-motion-micro) ease;
}

.mmt-project-nav__link--next {
	text-align: end;
	grid-column: 2;
}

.mmt-project-nav__link:hover,
.mmt-project-nav__link:focus-visible {
	border-color: var(--mmt-accent);
	transform: translateY(-2px);
}

.mmt-project-nav__label {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	color: var(--mmt-ink-secondary);
}

.mmt-project-nav__title {
	font-family: var(--mmt-font-display);
	font-weight: 600;
}

@media (max-width: 620px) {
	.mmt-project-nav {
		grid-template-columns: 1fr;
	}

	.mmt-project-nav__link--next {
		grid-column: auto;
		text-align: start;
	}
}

/* ==========================================================================
   9. TIMELINE (expériences professionnelles)
   ========================================================================== */

.mmt-timeline__item {
	display: flex;
	gap: var(--mmt-space-3);
	padding-block: var(--mmt-space-2);
	border-top: 1px solid var(--mmt-line-dark);
}

.mmt-timeline__item:last-child {
	border-bottom: 1px solid var(--mmt-line-dark);
}

.mmt-timeline__date {
	width: 190px;
	flex-shrink: 0;
	font-family: var(--mmt-font-mono);
	font-size: 0.8125rem;
	color: var(--mmt-on-dark-secondary);
}

.mmt-timeline__role {
	font-family: var(--mmt-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--mmt-on-dark);
}

.mmt-timeline__meta {
	font-size: 0.875rem;
	color: var(--mmt-on-dark-secondary);
	margin-top: 4px;
}

.mmt-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mmt-timeline--light .mmt-timeline__item {
	border-color: var(--mmt-line-light);
}

.mmt-timeline--light .mmt-timeline__date,
.mmt-timeline--light .mmt-timeline__meta {
	color: var(--mmt-ink-secondary);
}

.mmt-timeline--light .mmt-timeline__role {
	color: var(--mmt-ink);
}

.mmt-timeline__body {
	flex: 1;
	min-width: 0;
}

.mmt-timeline__badge {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 10px;
	border-radius: var(--mmt-radius-pill);
	background: var(--mmt-accent);
	color: #fff;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mmt-timeline__summary {
	margin: var(--mmt-space-1) 0 0;
	max-width: 70ch;
}

.mmt-timeline__content {
	margin-top: var(--mmt-space-1);
	max-width: 76ch;
}

.mmt-timeline__content ul {
	list-style: disc;
	padding-inline-start: 1.25em;
	margin: 0;
}

.mmt-timeline__content li {
	margin: 4px 0;
}

.mmt-timeline--dark .mmt-timeline__content {
	color: var(--mmt-on-dark-secondary);
}

.mmt-timeline__stack {
	margin-top: var(--mmt-space-2);
}

.mmt-timeline--dark .mmt-timeline__stack .mmt-tag {
	border-color: var(--mmt-line-dark);
	color: var(--mmt-on-dark-secondary);
}

.mmt-timeline-widget--dark {
	background: var(--mmt-graphite);
	color: var(--mmt-on-dark);
	padding: var(--mmt-space-4);
	border-radius: var(--mmt-radius-l);
}

/* Domaines d'expertise ET Portfolio (widgets Elementor natifs, home) se
   suivaient sans la moindre respiration ni distinction visuelle — même
   fond transparent (donc même papier chaud de la page), zéro espacement
   vertical, les deux grilles de cartes s'enchaînaient comme une seule
   section continue. On reprend ici le même motif que la version PHP de
   secours (template-parts/expertise.php, classes .mmt-section--muted) :
   un bandeau plein blanc pour l'expertise (repère visuel net contre le
   papier chaud de la page), une respiration verticale généreuse des deux
   côtés. :has() est déjà utilisé ailleurs dans ce fichier (.mmt-header),
   ce n'est pas une nouvelle dépendance. */
.elementor-section:has(> .elementor-container .elementor-widget-mmt-expertise) {
	background: var(--mmt-paper-2);
	border-block: 1px solid var(--mmt-line-light);
}

.elementor-widget-mmt-expertise {
	padding-block: var(--mmt-space-6);
}

.elementor-widget-mmc-project-grid {
	padding-block: var(--mmt-space-6);
}

.mmc-project-grid-widget .mmc-shortcode-projects {
	margin-top: var(--mmt-space-4);
}

/* Quand ce widget est posé en pleine largeur dans une section Elementor
   (ex. home) plutôt que comme carte flottante, sa propre bordure arrondie
   sort du viewport et devient invisible — seul un bandeau sombre à angles
   droits reste visible, qui semblait alors s'arrêter net contre la
   section suivante faute de respiration verticale propre. On ajoute un
   padding vertical généreux, cohérent avec .mmt-section, dès que le
   widget est effectivement pleine largeur (bord perdu de vue).
   Le padding de la carte (var(--mmt-space-4), ~32px) était aussi la SEULE
   respiration horizontale : sur un grand écran (≥1600px), le sur-titre,
   le titre et chaque ligne du parcours s'étiraient bord à bord quasiment
   sur toute la largeur de l'écran, sans être centrés ni limités — lignes
   de texte illisibles, alignement cassé. On recentre le contenu dans le
   même conteneur que le reste du site (cohérent avec le formulaire
   ci-dessous), scopé au wrapper Elementor uniquement pour ne pas toucher
   au rendu déjà correct de la carte flottante (page À propos, etc.). */
.elementor-widget-mmt-timeline .mmt-timeline-widget--dark {
	border-radius: 0;
	max-width: none;
	padding-block: var(--mmt-space-6);
	padding-inline: 0;
}

.elementor-widget-mmt-timeline .mmt-timeline-widget--dark > * {
	max-width: var(--mmt-container);
	margin-inline: auto;
	padding-inline: var(--mmt-space-4);
}

.mmt-timeline-widget .mmt-entry__title {
	margin-bottom: var(--mmt-space-3);
}

@media (max-width: 620px) {
	.mmt-timeline__item {
		flex-direction: column;
		gap: 4px;
	}

	.mmt-timeline__date {
		width: auto;
	}
}

/* ==========================================================================
   10. PIED DE PAGE
   ========================================================================== */

/* Pied de page « intelligent » : sombre, trois colonnes → empilé sur mobile. */
.mmt-footer {
	background: var(--mmt-graphite);
	color: var(--mmt-on-dark-secondary);
	padding-block: var(--mmt-space-6) var(--mmt-space-4);
	font-size: 0.9375rem;
}

.mmt-footer a:hover,
.mmt-footer a:focus-visible {
	color: var(--mmt-accent-2);
}

.mmt-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--mmt-space-5);
	padding-bottom: var(--mmt-space-5);
	border-bottom: 1px solid var(--mmt-line-dark);
}

.mmt-footer__brand .mmt-nav__logo img,
.mmt-footer__brand .custom-logo {
	width: 48px;
	height: 48px;
	margin-bottom: var(--mmt-space-2);
}

.mmt-footer__name {
	font-family: var(--mmt-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--mmt-on-dark);
	margin: 0 0 4px;
}

.mmt-footer__tagline {
	margin: 0;
	max-width: 36ch;
}

.mmt-footer__heading {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mmt-accent-on-dark);
	margin-bottom: var(--mmt-space-2);
}

.mmt-footer__list {
	display: grid;
	gap: 10px;
}

.mmt-footer__list a {
	color: var(--mmt-on-dark);
	min-height: 24px;
	display: inline-block;
}

.mmt-footer__address {
	white-space: pre-line;
}

.mmt-footer__cta {
	margin-top: var(--mmt-space-3);
}

.mmt-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--mmt-space-2);
	padding-top: var(--mmt-space-3);
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
}

.mmt-footer__copy {
	margin: 0;
}

.mmt-footer__links .mmt-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mmt-space-2);
}

.mmt-footer__links a {
	color: var(--mmt-on-dark);
}

@media (max-width: 860px) {
	.mmt-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--mmt-space-4);
	}

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

/* Espace réservé à la barre de navigation fixe (mobile) : hauteur de la
   barre + zone sécurisée iOS, uniquement quand elle est rendue. */
body.mmt-has-bottom-nav .mmt-footer {
	padding-bottom: calc(var(--mmt-space-4) + var(--mmt-bottom-nav-height, 0px) + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   11. CONTENU GÉNÉRIQUE (pages standards, single, 404)
   ========================================================================== */

.mmt-entry {
	padding-block: var(--mmt-space-6);
}

.mmt-entry__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: var(--mmt-space-3);
}

.mmt-entry__content {
	max-width: 760px;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.mmt-entry__content h2 {
	font-size: 1.5rem;
	margin-top: var(--mmt-space-4);
	margin-bottom: var(--mmt-space-2);
}

.mmt-entry__content h3 {
	font-size: 1.25rem;
	margin-top: var(--mmt-space-3);
	margin-bottom: var(--mmt-space-1);
}

.mmt-entry__content p {
	margin: 0 0 var(--mmt-space-2);
}

/*
 * Les liens de texte courant (rédigés dans l'éditeur WordPress : à propos,
 * CV, contenu de page classique) restent soulignés pour rester lisibles au
 * milieu d'un paragraphe. On limite volontairement cette règle aux
 * conteneurs de prose (p, li, blockquote) plutôt qu'à ".mmt-entry__content a"
 * en général : les composants du thème (cartes projets/expertise, boutons,
 * grille [mmc_projects]) sont eux aussi rendus à l'intérieur de
 * ".mmt-entry__content" — via le shortcode placé dans l'éditeur ou via
 * Elementor, qui gère ses widgets par le filtre the_content() — et ne
 * doivent jamais hériter du soulignement de prose, même sans classe dédiée
 * (ex. le lien de titre d'une carte projet).
 */
.mmt-entry__content p a,
.mmt-entry__content li a,
.mmt-entry__content blockquote a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mmt-entry__content p a:hover,
.mmt-entry__content li a:hover,
.mmt-entry__content blockquote a:hover {
	color: var(--mmt-accent);
}

/* ==========================================================================
   11-bis. PAGINATION
   ========================================================================== */

.mmt-pagination,
.navigation.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mmt-space-1);
	margin-top: var(--mmt-space-4);
}

.mmt-pagination a,
.mmt-pagination span,
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-s);
	font-size: 0.875rem;
}

.navigation.pagination .page-numbers.current {
	background: var(--mmt-accent);
	border-color: var(--mmt-accent);
	color: #fff;
}

.navigation.pagination a:hover,
.navigation.pagination a:focus-visible {
	border-color: var(--mmt-accent);
	color: var(--mmt-accent);
}

/* ==========================================================================
   12. IMPRESSION (page CV)
   ========================================================================== */

/* ==========================================================================
   12. PAGES À PROPOS / CV / CONTACT + FORMULAIRE
   ========================================================================== */

.mmt-about__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mmt-space-5);
}

.mmt-about__portrait {
	width: 220px;
	height: 260px;
	object-fit: cover;
	border-radius: var(--mmt-radius-l);
	border: 1px solid var(--mmt-accent);
	flex-shrink: 0;
}

.mmt-about__header > picture {
	flex-shrink: 0;
}

.mmt-about__content {
	max-width: 76ch;
}

/* Bandeau "pays clients" (page À propos) — voir inc/customizer.php. */
.mmt-countries {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mmt-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mmt-countries__item {
	display: flex;
	align-items: center;
	gap: var(--mmt-space-2);
	background: var(--mmt-paper-2, #fff);
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-m);
	padding: var(--mmt-space-2) var(--mmt-space-3);
}

.mmt-countries__flag {
	font-size: 1.5rem;
	line-height: 1;
}

.mmt-countries__name {
	font-size: 0.9375rem;
	font-weight: 500;
}

/*
 * .mmt-entry__content applique max-width:760px pour la lisibilité de la
 * prose (voir section 11). Sur la page Services, ce même conteneur sert
 * aussi à afficher la grille de cartes de services et tout ce qui suit
 * (grille « Réalisations récentes » via [mmc_projects], etc.) : du
 * contenu en grille, pas du texte à lire en continu. Sans cette
 * annulation, la grille héritait de la largeur de lecture et s'affichait
 * ratatinée dans le quart gauche de l'écran (audit demandé par Mounir).
 */
.mmt-services__grid,
.mmt-services__rest {
	max-width: none;
}

.mmt-services__grid {
	margin-top: var(--mmt-space-4);
}

.mmt-services__rest {
	margin-top: var(--mmt-space-6);
	padding-top: var(--mmt-space-6);
	border-top: 1px solid var(--mmt-line-light);
}

.mmt-cv__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: var(--mmt-space-2);
	font-family: var(--mmt-font-mono);
	font-size: 0.8125rem;
	color: var(--mmt-on-dark-secondary);
}

.mmt-cv__contact a:hover,
.mmt-cv__contact a:focus-visible {
	color: var(--mmt-accent-2);
}

.mmt-cv__block + .mmt-cv__block {
	margin-top: var(--mmt-space-5);
}

.mmt-cv__block > .mmt-entry__title {
	font-size: 1.5rem;
	margin-bottom: var(--mmt-space-3);
}

.mmt-cv__content h2 {
	font-size: 1.5rem;
	margin-bottom: var(--mmt-space-3);
}

.mmt-cv__content h3 {
	font-size: 1rem;
	margin-top: var(--mmt-space-3);
}

.mmt-contact__intro p {
	margin: 0;
}

.mmt-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	gap: var(--mmt-space-5);
	align-items: start;
}

.mmt-contact__list {
	margin-top: var(--mmt-space-2);
}

.mmt-contact__list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	border-top: 1px solid var(--mmt-line-light);
	overflow-wrap: anywhere;
}

.mmt-contact__list li > span {
	font-family: var(--mmt-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mmt-ink-secondary);
}

.mmt-contact__list a:hover,
.mmt-contact__list a:focus-visible {
	color: var(--mmt-accent);
}

@media (max-width: 860px) {
	.mmt-about__header {
		flex-direction: column-reverse;
		align-items: flex-start;
	}

	.mmt-contact__layout {
		grid-template-columns: 1fr;
	}
}

/* Formulaire (plugin mounir-maaroufi-core, [mmc_contact_form]) : le
   shortcode ne rend que le <form> lui-même, sans conteneur ni marge —
   correct sur la page Contact dédiée (déjà enveloppée par .mmt-container
   dans page-templates/contact.php), mais un widget Elementor natif
   « Formulaire de contact » posé ailleurs (ex. bas de la home) l'affichait
   bord à bord, sans respiration ni distinction visuelle avec la section
   précédente. Scopé au wrapper Elementor du widget uniquement, pour ne
   jamais toucher au rendu déjà correct de la page Contact dédiée. */
.elementor-widget-mmc-contact-form .mmc-contact {
	max-width: var(--mmt-container);
	margin-inline: auto;
	padding: var(--mmt-space-6) var(--mmt-space-3);
}

.mmc-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mmt-space-2) var(--mmt-space-3);
}

.mmc-contact__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mmc-contact__field--wide {
	grid-column: 1 / -1;
}

.mmc-contact__field label {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mmt-ink-secondary);
}

.mmc-contact__required {
	color: var(--mmt-accent);
}

.mmc-contact__field input,
.mmc-contact__field textarea {
	font: inherit;
	padding: 12px 14px;
	border: 1px solid var(--mmt-line-strong);
	border-radius: var(--mmt-radius-s);
	background: var(--mmt-paper-2);
	color: var(--mmt-ink);
	width: 100%;
	transition: border-color var(--mmt-motion-micro) ease, box-shadow var(--mmt-motion-micro) ease;
}

.mmc-contact__field textarea {
	resize: vertical;
	min-height: 150px;
}

.mmc-contact__field input:focus-visible,
.mmc-contact__field textarea:focus-visible {
	outline: none;
	border-color: var(--mmt-accent);
	box-shadow: 0 0 0 3px rgba(108, 76, 224, 0.18);
}

/* Indice d'indicatif téléphonique détecté par IP (assets/js/phone-country.js,
   plugin) — même style pour le formulaire de contact et la demande de devis. */
.mmc-phone-hint {
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--mmt-ink-secondary);
}

.mmc-contact__hp {
	/* Même technique que .mmt-screen-reader-text : aucun décalage négatif
	   (left: -9999px créait 10 000 px de défilement horizontal en RTL). */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mmc-contact__consent {
	margin-top: var(--mmt-space-2);
	font-size: 0.875rem;
	color: var(--mmt-ink-secondary);
}

.mmc-contact__consent input {
	margin-inline-end: 8px;
}

.mmc-contact__actions {
	display: flex;
	align-items: center;
	gap: var(--mmt-space-2);
	margin-top: var(--mmt-space-2);
}

.mmc-contact__submit {
	border: 0;
}

.mmc-contact__hint {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	color: var(--mmt-ink-secondary);
}

.mmc-contact__notice {
	padding: var(--mmt-space-2) var(--mmt-space-3);
	border-radius: var(--mmt-radius-s);
	margin-bottom: var(--mmt-space-3);
}

.mmc-contact__notice ul {
	list-style: disc;
	padding-inline-start: 1.2em;
}

.mmc-contact__notice--success {
	background: #e8f6ee;
	border: 1px solid #9fd7b7;
	color: #0f5132;
}

.mmc-contact__notice--error {
	background: #fdecec;
	border: 1px solid #f1b0b0;
	color: var(--mmt-danger);
}

@media (max-width: 620px) {
	.mmc-contact__grid {
		grid-template-columns: 1fr;
	}
}

/* Formulaire « Demande de devis » à parcours adaptatif (plugin
   mounir-maaroufi-core, [mmc_quote_form] / widget Elementor natif). Sans
   JavaScript, tous les fieldset[data-mmc-step] (étapes fixes + sous-
   questions conditionnelles, toutes facultatives) n'ont AUCUN style de
   masquage : ils s'affichent tous, empilés, entièrement utilisables (audit
   accessibilité, section 14). Ce n'est qu'une fois quote-form.js exécuté —
   qui ajoute la classe .mmc-quote--enhanced sur le <form> — que la règle
   ci-dessous masque les étapes non pertinentes/non actives et affiche la
   navigation Précédent/Suivant. */
.elementor-widget-mmc-quote-widget .mmc-quote,
.mmc-quote-widget .mmc-quote {
	max-width: var(--mmt-container);
	margin-inline: auto;
	padding: var(--mmt-space-6) var(--mmt-space-3);
}

.mmc-quote--enhanced .mmc-quote__step:not(.mmc-quote__step--active) {
	display: none;
}

.mmc-quote__progress {
	height: 4px;
	border-radius: 999px;
	background: var(--mmt-line-light);
	overflow: hidden;
	margin-bottom: var(--mmt-space-4);
}

.mmc-quote__progress-bar {
	display: block;
	height: 100%;
	width: 25%;
	background: var(--mmt-accent);
	transition: width var(--mmt-motion-base) var(--mmt-ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.mmc-quote__progress-bar {
		transition: none;
	}
}

.mmc-quote__step {
	border: 0;
	padding: 0;
	margin: 0 0 var(--mmt-space-5);
}

.mmc-quote--enhanced .mmc-quote__step--active {
	animation: mmc-quote-step-in var(--mmt-motion-base) var(--mmt-ease-out);
}

@keyframes mmc-quote-step-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmc-quote--enhanced .mmc-quote__step--active {
		animation: none;
	}
}

.mmc-quote__legend {
	display: flex;
	align-items: baseline;
	gap: var(--mmt-space-2);
	font-family: var(--mmt-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: var(--mmt-space-3);
	padding: 0;
}

.mmc-quote__legend:focus-visible {
	outline: none;
}

.mmc-quote__step-no {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--mmt-accent);
	flex-shrink: 0;
}

.mmc-quote__types {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mmt-space-2);
}

.mmc-quote__type-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-m);
	background: var(--mmt-paper-2);
	padding: var(--mmt-space-3);
	cursor: pointer;
	transition: border-color var(--mmt-motion-micro) ease, box-shadow var(--mmt-motion-micro) ease, transform var(--mmt-motion-micro) ease;
}

.mmc-quote__type-card:hover {
	transform: translateY(-2px);
	border-color: var(--mmt-accent);
}

.mmc-quote__type-card input[type="radio"] {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	width: 18px;
	height: 18px;
	accent-color: var(--mmt-accent);
}

.mmc-quote__type-card:has(input:checked) {
	border-color: var(--mmt-accent);
	box-shadow: 0 0 0 2px rgba(108, 76, 224, 0.18);
	background: var(--mmt-paper);
}

.mmc-quote__type-card:has(input:focus-visible) {
	outline: 2px solid var(--mmt-accent);
	outline-offset: 2px;
}

.mmc-quote__type-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mmt-radius-m);
	background: var(--mmt-paper);
	color: var(--mmt-accent);
}

.mmc-quote__type-icon svg {
	width: 20px;
	height: 20px;
}

.mmc-quote__type-label {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Variante compacte (sous-questions conditionnelles à choix unique, sans
   icône — ex. taille de catalogue) : plus de colonnes, carte centrée. */
.mmc-quote__types--compact {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mmc-quote__type-card--compact {
	align-items: center;
	text-align: center;
	padding: var(--mmt-space-3) var(--mmt-space-2);
}

/* Micro-animation « click & choose » : confirme visuellement le choix au
   moment où l'étape avance automatiquement (voir data-mmc-autoadvance dans
   quote-form.js). Volontairement brève et discrète, jamais bloquante. */
@keyframes mmc-quote-card-pick {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(108, 76, 224, 0);
	}
	45% {
		transform: scale(0.96);
		box-shadow: 0 0 0 5px rgba(108, 76, 224, 0.22);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(108, 76, 224, 0);
	}
}

.mmc-quote__type-card--picked {
	animation: mmc-quote-card-pick 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
	.mmc-quote__type-card--picked {
		animation: none;
	}
}

.mmc-quote__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--mmt-space-3);
}

.mmc-quote__field label {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mmt-ink-secondary);
}

.mmc-quote__field select {
	font: inherit;
	padding: 12px 14px;
	border: 1px solid var(--mmt-line-strong);
	border-radius: var(--mmt-radius-s);
	background: var(--mmt-paper-2);
	color: var(--mmt-ink);
	width: 100%;
}

.mmc-quote__field select:focus-visible {
	outline: none;
	border-color: var(--mmt-accent);
	box-shadow: 0 0 0 3px rgba(108, 76, 224, 0.18);
}

.mmc-quote__checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mmt-space-2);
}

.mmc-quote__check {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-s);
	background: var(--mmt-paper-2);
	padding: 12px 14px;
	font-size: 0.9375rem;
	cursor: pointer;
}

.mmc-quote__check input {
	accent-color: var(--mmt-accent);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Badge « Recommandé » (mmc-quote__check--recommended, ajoutée par
   quote-form.js selon le type de projet choisi) : purement indicatif, ne
   restreint jamais la sélection — toutes les cases restent cochables. */
.mmc-quote__check-badge {
	display: none;
	margin-inline-start: auto;
	flex-shrink: 0;
	font-family: var(--mmt-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mmt-accent);
	border: 1px solid var(--mmt-accent);
	border-radius: 999px;
	padding: 2px 8px;
}

.mmc-quote__check--recommended {
	border-color: var(--mmt-accent);
	background: rgba(108, 76, 224, 0.06);
}

.mmc-quote__check--recommended .mmc-quote__check-badge {
	display: inline-block;
}

.mmc-quote__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mmt-space-2) var(--mmt-space-3);
}

.mmc-quote__field2 {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mmc-quote__field2--wide {
	grid-column: 1 / -1;
}

.mmc-quote__field2 label {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mmt-ink-secondary);
}

.mmc-quote__required {
	color: var(--mmt-accent);
}

.mmc-quote__field2 input,
.mmc-quote__field2 textarea {
	font: inherit;
	padding: 12px 14px;
	border: 1px solid var(--mmt-line-strong);
	border-radius: var(--mmt-radius-s);
	background: var(--mmt-paper-2);
	color: var(--mmt-ink);
	width: 100%;
	transition: border-color var(--mmt-motion-micro) ease, box-shadow var(--mmt-motion-micro) ease;
}

.mmc-quote__field2 textarea {
	resize: vertical;
	min-height: 120px;
}

.mmc-quote__field2 input:focus-visible,
.mmc-quote__field2 textarea:focus-visible {
	outline: none;
	border-color: var(--mmt-accent);
	box-shadow: 0 0 0 3px rgba(108, 76, 224, 0.18);
}

.mmc-quote__consent {
	margin-top: var(--mmt-space-2);
	font-size: 0.875rem;
	color: var(--mmt-ink-secondary);
}

.mmc-quote__consent input {
	margin-inline-end: 8px;
}

.mmc-quote__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mmc-quote__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mmt-space-2);
	margin-top: var(--mmt-space-4);
}

/* .mmt-btn définit display:inline-flex, qui l'emporte sur la règle UA
   [hidden]{display:none} (même spécificité, mais déclarée après dans la
   cascade) : sans cette règle, quote-form.js masque bien les boutons via
   l'attribut hidden, mais ils restent visibles à l'écran malgré tout — le
   bug s'est produit en production (« Envoyer ma demande » restait affiché
   à l'étape 1/4). Spécificité volontairement plus élevée pour gagner face
   à .mmt-btn quel que soit l'ordre des règles. */
.mmc-quote__nav .mmt-btn[hidden] {
	display: none;
}

.mmc-quote__nav .mmc-quote__next,
.mmc-quote__nav .mmc-quote__submit {
	margin-inline-start: auto;
}

.mmc-quote__notice {
	padding: var(--mmt-space-2) var(--mmt-space-3);
	border-radius: var(--mmt-radius-s);
	margin-bottom: var(--mmt-space-3);
}

.mmc-quote__notice ul {
	list-style: disc;
	padding-inline-start: 1.2em;
}

.mmc-quote__notice--success {
	background: #e8f6ee;
	border: 1px solid #9fd7b7;
	color: #0f5132;
}

.mmc-quote__notice--error {
	background: #fdecec;
	border: 1px solid #f1b0b0;
	color: var(--mmt-danger);
}

@media (max-width: 900px) {
	.mmc-quote__types,
	.mmc-quote__types--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.mmc-quote__types,
	.mmc-quote__types--compact,
	.mmc-quote__checks,
	.mmc-quote__grid {
		grid-template-columns: 1fr;
	}

	.mmc-quote__nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.mmc-quote__nav .mmc-quote__next,
	.mmc-quote__nav .mmc-quote__submit,
	.mmc-quote__nav .mmc-quote__prev {
		margin-inline-start: 0;
		width: 100%;
	}
}

/* ==========================================================================
   13. ARRIÈRE-PLAN ANIMÉ DES SECTIONS SOMBRES (aurora CSS + particules canvas)
   ========================================================================== */

/*
 * Aurora : deux halos de couleur (accent violet / cyan) qui dérivent très
 * lentement + une trame fine. Uniquement des transformations et de
 * l'opacité (composité GPU), aucune repeinture de mise en page. Le contenu
 * reste au-dessus (z-index) et lisible : halos plafonnés à ~35 % d'opacité
 * sur graphite. Sous prefers-reduced-motion, les halos restent fixes.
 */
.mmt-bg-anim {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mmt-bg-anim > .mmt-container {
	position: relative;
	z-index: 2;
}

.mmt-bg-anim::before,
.mmt-bg-anim::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Halos */
.mmt-bg-anim::before {
	background:
		radial-gradient(38% 55% at 78% 20%, rgba(108, 76, 224, 0.42), transparent 70%),
		radial-gradient(32% 45% at 12% 85%, rgba(53, 197, 235, 0.28), transparent 70%),
		radial-gradient(26% 40% at 55% 105%, rgba(108, 76, 224, 0.22), transparent 70%);
	filter: blur(28px);
	transform: translate3d(0, 0, 0) scale(1.15);
	animation: mmt-aurora 22s var(--mmt-ease-in-out) infinite alternate;
	will-change: transform;
}

/* Trame fine qui dérive en diagonale */
.mmt-bg-anim::after {
	background-image:
		linear-gradient(rgba(246, 244, 239, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(246, 244, 239, 0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
	animation: mmt-grid-drift 60s linear infinite;
}

@keyframes mmt-aurora {
	0%   { transform: translate3d(-3%, -2%, 0) scale(1.15) rotate(0deg); }
	50%  { transform: translate3d(3%, 3%, 0) scale(1.25) rotate(4deg); }
	100% { transform: translate3d(-2%, 4%, 0) scale(1.18) rotate(-3deg); }
}

@keyframes mmt-grid-drift {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 56px 56px, 56px 56px; }
}

/* Canvas des particules (mode « particles ») */
.mmt-bg-anim__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	opacity: 0.9;
}

/*
 * Calque SVG animé (mode « svg », voir inc/background.php::mmt_bg_anim_layer).
 * Trois familles d'animation, toutes en CSS :
 * - orbites : rotation continue (transform-box: fill-box pour tourner autour
 *   de leur propre centre), vitesses et sens différents, satellites embarqués ;
 * - signaux : un court segment lumineux (dasharray) parcourt chaque courbe
 *   (dashoffset animé) ;
 * - nœuds : pulsation douce d'opacité / échelle, déphasée.
 * Le SVG couvre la section (slice) et reste sous le contenu (z-index 1,
 * au-dessus des halos). Sur mobile, seules les orbites restent (moins de
 * repeintures). Tout est figé sous prefers-reduced-motion.
 */
.mmt-bg-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

[dir="rtl"] .mmt-bg-svg {
	transform: scaleX(-1);
}

.mmt-bg-svg__orbit ellipse {
	fill: none;
	stroke: rgba(246, 244, 239, 0.14);
	stroke-width: 1;
}

.mmt-bg-svg__orbit {
	transform-box: fill-box;
	transform-origin: center;
	animation: mmt-bg-spin 90s linear infinite;
}

.mmt-bg-svg__orbit--2 {
	animation-duration: 64s;
	animation-direction: reverse;
}

.mmt-bg-svg__orbit--3 {
	animation-duration: 40s;
}

.mmt-bg-svg__sat {
	fill: #f6f4ef;
	opacity: 0.85;
}

.mmt-bg-svg__sat--accent {
	fill: var(--mmt-accent-2);
}

.mmt-bg-svg__core {
	transform-box: fill-box;
	transform-origin: center;
	animation: mmt-bg-pulse 6s var(--mmt-ease-in-out) infinite;
}

.mmt-bg-svg__flow {
	stroke: url(#mmt-bg-svg-signal);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 160 1400;
	stroke-dashoffset: 1560;
	opacity: 0.75;
	animation: mmt-bg-signal 14s linear infinite;
}

.mmt-bg-svg__flow--2 {
	stroke-width: 1;
	animation-duration: 19s;
	animation-delay: -7s;
}

.mmt-bg-svg__flow--3 {
	stroke-width: 1;
	animation-duration: 16s;
	animation-delay: -3s;
	opacity: 0.55;
}

.mmt-bg-svg__node {
	fill: var(--mmt-accent-2);
	transform-box: fill-box;
	transform-origin: center;
	animation: mmt-bg-node 4s var(--mmt-ease-in-out) infinite;
}

.mmt-bg-svg__node--2 { animation-delay: -1.3s; }
.mmt-bg-svg__node--3 { animation-delay: -2.4s; fill: var(--mmt-accent); }
.mmt-bg-svg__node--4 { animation-delay: -0.7s; }

@keyframes mmt-bg-spin {
	to { transform: rotate(360deg); }
}

@keyframes mmt-bg-pulse {
	0%, 100% { transform: scale(1); opacity: 0.55; }
	50%      { transform: scale(1.35); opacity: 0.9; }
}

@keyframes mmt-bg-signal {
	to { stroke-dashoffset: 0; }
}

@keyframes mmt-bg-node {
	0%, 100% { transform: scale(1); opacity: 0.35; }
	50%      { transform: scale(1.8); opacity: 1; }
}

@media (max-width: 860px) {
	.mmt-bg-svg__flows,
	.mmt-bg-svg__nodes {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmt-bg-anim::before,
	.mmt-bg-anim::after,
	.mmt-bg-svg * {
		animation: none !important;
	}

	/* Figure statique : les signaux deviennent de fines lignes continues. */
	.mmt-bg-svg__flow {
		stroke-dasharray: none;
		stroke: rgba(53, 197, 235, 0.25);
	}
}

/* ==========================================================================
   14. BLOG : CARTES D'ARTICLE ET ARTICLE
   ========================================================================== */

.mmt-post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mmt-line-light);
	border-radius: var(--mmt-radius-m);
	background: var(--mmt-paper-2);
	overflow: hidden;
	transition: transform var(--mmt-motion-base) var(--mmt-ease-out), box-shadow var(--mmt-motion-base) var(--mmt-ease-out), border-color var(--mmt-motion-base) var(--mmt-ease-out);
}

.mmt-post-card:hover,
.mmt-post-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--mmt-shadow-lift);
	border-color: var(--mmt-accent);
}

.mmt-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--mmt-graphite-2);
	overflow: hidden;
}

.mmt-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mmt-motion-section) var(--mmt-ease-out);
}

.mmt-post-card:hover .mmt-post-card__media img {
	transform: scale(1.03);
}

.mmt-post-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: radial-gradient(60% 80% at 80% 20%, rgba(108, 76, 224, 0.5), transparent 70%), radial-gradient(50% 60% at 15% 90%, rgba(53, 197, 235, 0.35), transparent 70%), var(--mmt-graphite-2);
}

.mmt-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--mmt-space-3);
	flex: 1;
}

.mmt-post-card__meta,
.mmt-post__meta {
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--mmt-ink-secondary);
	margin: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mmt-post__meta {
	color: var(--mmt-on-dark-secondary);
	margin-bottom: var(--mmt-space-2);
}

.mmt-post__meta a:hover,
.mmt-post__meta a:focus-visible {
	color: var(--mmt-accent-2);
}

.mmt-post-card__title {
	font-size: 1.125rem;
	line-height: 1.3;
}

.mmt-post-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--mmt-ink-secondary);
	flex: 1;
}

.mmt-post__content {
	max-width: 72ch;
	margin-inline: auto;
}

.mmt-post__content img {
	border-radius: var(--mmt-radius-m);
	margin-block: var(--mmt-space-3);
}

.mmt-post__content pre {
	background: var(--mmt-graphite);
	color: var(--mmt-on-dark);
	padding: var(--mmt-space-3);
	border-radius: var(--mmt-radius-s);
	overflow: auto;
	font-family: var(--mmt-font-mono);
	font-size: 0.875rem;
}

.mmt-post__content code {
	font-family: var(--mmt-font-mono);
	font-size: 0.9em;
}

.mmt-post__content :not(pre) > code {
	background: rgba(108, 76, 224, 0.08);
	padding: 1px 6px;
	border-radius: 4px;
}

.mmt-post__content blockquote {
	margin: var(--mmt-space-3) 0;
	padding: var(--mmt-space-2) var(--mmt-space-3);
	border-inline-start: 3px solid var(--mmt-accent);
	background: var(--mmt-paper-2);
	border-radius: 0 var(--mmt-radius-s) var(--mmt-radius-s) 0;
}

.mmt-post .mmt-project-nav {
	max-width: 72ch;
	margin-inline: auto;
}

/* Pages composées avec Elementor : aucune contrainte de largeur du thème. */
.mmt-elementor-page {
	max-width: none;
	font-size: inherit;
	line-height: inherit;
}

/*
 * Garde-fou Kit Elementor : si une couleur de lien globale est définie
 * dans Réglages du site, Elementor compile `.elementor-kit-N a { color }`
 * (spécificité 0,1,1) qui l'emporterait sur nos composants. On remonte
 * la spécificité des liens que le thème possède (navigation, boutons,
 * cartes) pour qu'ils gardent leurs couleurs quel que soit le Kit.
 */
body[class*="elementor-kit-"] .mmt-nav__links a,
body[class*="elementor-kit-"] .mmt-footer a,
body[class*="elementor-kit-"] .mmt-project-card a,
body[class*="elementor-kit-"] .mmt-post-card a,
body[class*="elementor-kit-"] .mmt-btn--outline-dark,
body[class*="elementor-kit-"] .mmt-btn--outline-light,
body[class*="elementor-kit-"] .mmt-btn--light {
	color: inherit;
}

body[class*="elementor-kit-"] .mmt-btn--outline-dark {
	color: var(--mmt-on-dark);
}

body[class*="elementor-kit-"] .mmt-btn--outline-light {
	color: var(--mmt-ink);
}

body[class*="elementor-kit-"] .mmt-btn--primary {
	color: #fff;
}

body[class*="elementor-kit-"] .mmt-nav__links a:hover,
body[class*="elementor-kit-"] .mmt-nav__links a:focus-visible,
body[class*="elementor-kit-"] .mmt-footer__links a:hover,
body[class*="elementor-kit-"] .mmt-footer__links a:focus-visible,
body[class*="elementor-kit-"] .mmt-btn--outline-dark:hover,
body[class*="elementor-kit-"] .mmt-btn--outline-dark:focus-visible,
body[class*="elementor-kit-"] .mmt-btn--outline-light:hover,
body[class*="elementor-kit-"] .mmt-btn--outline-light:focus-visible {
	color: var(--mmt-accent);
}

/* ==========================================================================
   15. CONTACT RAPIDE : BOUTON WHATSAPP FLOTTANT + BARRE MOBILE (inc/quick-nav.php)
   ========================================================================== */

:root {
	--mmt-bottom-nav-height: 0px;
	--mmt-whatsapp: #25d366; /* vert officiel WhatsApp : blanc dessus = 1,9:1 → l'icône est posée sur un disque graphite pour le contraste */
}

/* --- Bouton WhatsApp ----------------------------------------------------- */
.mmt-whatsapp {
	position: fixed;
	inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
	inset-inline-end: 20px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 56px;
	min-height: 56px;
	padding: 0 18px 0 14px;
	border-radius: var(--mmt-radius-pill);
	background: var(--mmt-graphite-2);
	color: var(--mmt-on-dark);
	font-family: var(--mmt-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	box-shadow: 0 10px 30px rgba(14, 16, 19, 0.28), 0 0 0 1px rgba(246, 244, 239, 0.08) inset;
	transition: transform var(--mmt-motion-micro) var(--mmt-ease-out), box-shadow var(--mmt-motion-micro) ease;
}

.mmt-whatsapp--left {
	inset-inline-end: auto;
	inset-inline-start: 20px;
}

.mmt-whatsapp__icon {
	width: 26px;
	height: 26px;
	color: var(--mmt-whatsapp);
	flex: none;
}

.mmt-whatsapp:hover,
.mmt-whatsapp:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(14, 16, 19, 0.34), 0 0 0 1px rgba(246, 244, 239, 0.12) inset;
	color: var(--mmt-on-dark);
}

.mmt-whatsapp:focus-visible {
	outline: 3px solid var(--mmt-accent-2);
	outline-offset: 3px;
}

/* Icône seule sur mobile (gain de place), capsule avec texte sur ordinateur. */
@media (max-width: 860px) {
	.mmt-whatsapp {
		padding: 0;
		width: 56px;
		justify-content: center;
	}

	.mmt-whatsapp__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	/* Au-dessus de la barre mobile (jamais par-dessus). */
	body.mmt-has-bottom-nav .mmt-whatsapp--above-nav {
		inset-block-end: calc(var(--mmt-bottom-nav-height) + 16px + env(safe-area-inset-bottom, 0px));
	}

	.mmt-whatsapp--desktop-only {
		display: none;
	}
}

@media (min-width: 861px) {
	.mmt-whatsapp--mobile-only {
		display: none;
	}
}

/* Masqué (JS) si un autre bouton WhatsApp flottant est détecté, ou quand
   le menu principal mobile est ouvert. */
.mmt-whatsapp.is-hidden,
.mmt-bottom-nav.is-hidden {
	display: none;
}

/* --- Barre de navigation mobile ----------------------------------------- */
.mmt-bottom-nav {
	display: none;
}

@media (max-width: 860px) {
	:root {
		--mmt-bottom-nav-height: 64px;
	}

	.mmt-bottom-nav {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 50;
		height: calc(var(--mmt-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: rgba(246, 244, 239, 0.94);
		-webkit-backdrop-filter: saturate(140%) blur(10px);
		backdrop-filter: saturate(140%) blur(10px);
		border-top: 1px solid var(--mmt-line-light);
		box-shadow: 0 -6px 24px rgba(14, 16, 19, 0.06);
	}

	.mmt-bottom-nav__list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		height: var(--mmt-bottom-nav-height);
	}

	.mmt-bottom-nav__link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		height: 100%;
		min-width: 44px;
		color: var(--mmt-ink-secondary);
		font-family: var(--mmt-font-mono);
		font-size: 0.6875rem;
		letter-spacing: 0.02em;
		line-height: 1;
		text-align: center;
		transition: color var(--mmt-motion-micro) ease;
	}

	.mmt-bottom-nav__icon {
		width: 24px;
		height: 24px;
		transition: transform var(--mmt-motion-micro) var(--mmt-ease-out);
	}

	.mmt-bottom-nav__link:hover,
	.mmt-bottom-nav__link:focus-visible {
		color: var(--mmt-ink);
	}

	.mmt-bottom-nav__link:focus-visible {
		outline-offset: -3px;
	}

	/* Page courante : couleur + graisse + indicateur (pas seulement la couleur). */
	.mmt-bottom-nav__link[aria-current="page"] {
		color: var(--mmt-accent);
		font-weight: 600;
	}

	.mmt-bottom-nav__link[aria-current="page"] .mmt-bottom-nav__icon {
		transform: translateY(-1px);
	}

	.mmt-bottom-nav__link[aria-current="page"]::after {
		content: "";
		width: 18px;
		height: 3px;
		border-radius: 2px;
		background: var(--mmt-accent);
	}

	/* Le contenu ne doit jamais finir sous la barre. */
	body.mmt-has-bottom-nav .mmt-main {
		padding-bottom: 0;
	}
}

/* Très petits écrans : libellés plus compacts, jamais de débordement. */
@media (max-width: 359px) {
	.mmt-bottom-nav__label {
		font-size: 0.625rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmt-whatsapp,
	.mmt-bottom-nav__icon {
		transition: none;
	}

	.mmt-whatsapp:hover,
	.mmt-whatsapp:focus-visible {
		transform: none;
	}
}

/* --- Pause des animations (WCAG 2.2.2) : html.mmt-motion-off --------------- */
.mmt-motion-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid var(--mmt-line-dark);
	border-radius: var(--mmt-radius-pill);
	color: var(--mmt-on-dark);
	font: inherit;
	font-family: var(--mmt-font-mono);
	font-size: 0.75rem;
	padding: 8px 14px;
	min-height: 36px;
}

.mmt-motion-toggle:hover,
.mmt-motion-toggle:focus-visible {
	border-color: var(--mmt-accent-2);
	color: var(--mmt-accent-2);
}

.mmt-motion-toggle__off,
html.mmt-motion-off .mmt-motion-toggle__on {
	display: none;
}

html.mmt-motion-off .mmt-motion-toggle__off {
	display: inline;
}

html.mmt-motion-off .mmt-marquee__track,
html.mmt-motion-off .mmt-bg-anim::before,
html.mmt-motion-off .mmt-bg-anim::after,
html.mmt-motion-off .mmt-bg-svg * {
	animation-play-state: paused !important;
}

html.mmt-motion-off [data-reveal] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

html.mmt-motion-off .mmt-hero__title-word > span,
html.mmt-motion-off .mmt-hero__portrait,
html.mmt-motion-off [data-magnetic] {
	transform: none !important;
	transition: none !important;
}

@media print {
	.mmt-whatsapp,
	.mmt-bottom-nav {
		display: none !important;
	}
}

@media print {
	.mmt-nav,
	.mmt-footer,
	.mmt-no-print {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.mmt-section--dark {
		background: #fff;
		color: #000;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.75em;
	}

	/* Page CV : mise en page compacte, frise imprimable. */
	.mmt-cv__header,
	.mmt-section {
		padding-block: 12pt;
	}

	.mmt-timeline__item {
		page-break-inside: avoid;
		border-color: #ddd;
	}

	.mmt-timeline__badge {
		background: none;
		color: #000;
		border: 1px solid #000;
	}

	.mmt-eyebrow,
	.mmt-hero__subtitle,
	.mmt-timeline__date,
	.mmt-timeline__meta,
	.mmt-timeline__role,
	.mmt-cv__contact,
	.mmt-hero__title,
	.mmt-hero__lede {
		color: #000 !important;
	}

	.mmt-tag {
		border-color: #999;
	}
}

/* ==========================================================================
   13. ELEMENTOR — cohabitation propre
   ========================================================================== */

/* Widgets natifs placés dans une section Elementor « en boîte » : c'est le
   conteneur Elementor (largeur du Kit, 1240 px synchronisés) qui définit la
   largeur, le conteneur du thème s'efface. Dans une section « pleine
   largeur » (ou un conteneur flex pleine largeur) — ce que produit l'étape
   d'import « Accueil composé avec Elementor » — le conteneur du thème
   garde ses 1240 px centrés pour que le fond sombre file bord à bord tout
   en gardant le contenu aligné sur le reste du site. */
.elementor-section-boxed .elementor-widget-container .mmt-container,
.e-con-boxed .elementor-widget-container .mmt-container {
	max-width: none;
	padding-inline: 0;
}