/*
 * Bloc reutilisable "media + texte" (2 colonnes). Section pleine largeur, contenu contraint et centre
 * (regle METHODE §4bis). Variantes pilotees par des classes : fond clair/sombre, media a gauche/droite,
 * media image simple / galerie. Effets reconstruits en CSS (methode §4). Zero CLS ; slider galerie en
 * progressive enhancement (sans JS : swap via :target ; avec JS : swap + navigation clavier).
 */

/* ---- Section : fond pleine largeur bord a bord ---- */
.mx-media-texte {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--60); /* 104 (cote Figma) */
	padding-inline: var(--wp--preset--spacing--60); /* 104 (cote Figma) : inset du contenu, fond toujours bord a bord */
}

.mx-media-texte.is-fond-clair {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
}

.mx-media-texte.is-fond-gris {
	background-color: var(--wp--preset--color--grey-ultralight);
	color: var(--wp--preset--color--grey-dark);
}

.mx-media-texte.is-fond-sombre {
	background-color: var(--wp--preset--color--grey-dark);
	color: var(--wp--preset--color--white);
}

/* ---- Contenu contraint et centre, 2 colonnes ---- */
.mx-media-texte__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	display: grid;
	/* image simple : media un peu plus large que le texte (cote Figma 630 / 546) */
	grid-template-columns: 1.15fr 1fr;
	gap: var(--wp--custom--gutter--columns); /* 56 (cote Figma) */
	align-items: center;
}

/* galerie : colonne media plus large (cote Figma 720 / 456) */
.mx-media-texte.is-media-galerie .mx-media-texte__inner {
	grid-template-columns: 1.5fr 1fr;
}

/* Inversion des colonnes : media a droite (le media reste 1er dans le DOM pour l'empilement mobile) */
.mx-media-texte.is-media-droite .mx-media-texte__media {
	order: 2;
}

/* Le media passe en 2e colonne via order : on INVERSE aussi grid-template-columns pour que la colonne du
   media reste la PLUS LARGE (sinon le media heriterait de la colonne etroite -> image plus petite a droite). */
.mx-media-texte.is-media-droite .mx-media-texte__inner {
	grid-template-columns: 1fr 1.15fr;
}

.mx-media-texte.is-media-droite.is-media-galerie .mx-media-texte__inner {
	grid-template-columns: 1fr 1.5fr;
}

.mx-media-texte__media {
	min-width: 0;
}

/* ---- Colonne texte ---- */
.mx-media-texte__text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40); /* 24 */
}

/* surtitre + titre groupes (ecart 8, cote Figma) */
.mx-media-texte__head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 */
}

/* Titre de section : toujours l'aspect H2 (Urbanist Black 28), quel que soit le niveau semantique choisi
   (h2 ou h3 pour l'outline). Couleur heritee du fond (clair : grey-dark, sombre : blanc). */
.mx-media-texte__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--title); /* 28 */
	line-height: 1;
	color: inherit;
}

.mx-media-texte__body {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: inherit;
}

.mx-media-texte__body p {
	margin: 0 0 var(--wp--preset--spacing--30); /* 16 entre paragraphes */
}

.mx-media-texte__body p:last-child {
	margin-bottom: 0;
}

/* Titre de liste (ex. "Nos equipements cles :") + puces groupes (ecart 8, cote Figma) */
.mx-media-texte__puces {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 */
}

.mx-media-texte__puces-titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: inherit;
}

/* CTA : reprend les styles de bouton de la charte (is-style-metalx-primaire / -lien). */
.mx-media-texte__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30); /* 16 */
}

/* ---- Colonne media : image simple ---- */
.mx-media-texte__image {
	position: relative;
	overflow: hidden;
	border-radius: var(--mx-radius-s); /* 4 (cote Figma) */
	aspect-ratio: 630 / 500; /* cote Figma (zero CLS) */
}

.mx-media-texte__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Colonne media : galerie (grande image + miniatures) ---- */
.mx-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30); /* 16 */
}

.mx-gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--mx-radius-s); /* 4 */
	aspect-ratio: 718 / 433; /* cote Figma (zero CLS) */
}

.mx-gallery__full {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}

/* Sans JS : swap via l'ancre :target ; par defaut (aucune cible) la 1re image (.is-active) s'affiche. */
.mx-gallery__full:target {
	display: block;
}

.mx-gallery__stage:not(:has(.mx-gallery__full:target)) .mx-gallery__full.is-active {
	display: block;
}

/* Avec JS : le swap est pilote par .is-active, on neutralise :target. */
.mx-gallery.is-enhanced .mx-gallery__full:target {
	display: none;
}

.mx-gallery.is-enhanced .mx-gallery__full.is-active {
	display: block;
}

/* Grande image (avec JS) : swipe horizontal, tout en gardant le scroll vertical de page ; pas de
   selection / drag natif de l'image pendant le glissement. */
.mx-gallery.is-enhanced .mx-gallery__stage {
	touch-action: pan-y;
	user-select: none;
	cursor: grab;
}

.mx-gallery__full {
	-webkit-user-drag: none;
}

/* Fleches precedent / suivant SUR la grande image : injectees en JS (aucun bouton inerte sans JS),
   affichees au survol de l'image (ou au focus clavier, ou en tactile ou il n'y a pas de survol). */
.mx-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--mx-radius); /* 8 */
	background-color: rgba(30, 30, 30, 0.55); /* sombre translucide sur l'image */
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--mx-transition), background-color var(--mx-transition);
}

.mx-gallery__nav-prev {
	left: var(--wp--preset--spacing--30); /* 16 */
}

.mx-gallery__nav-next {
	right: var(--wp--preset--spacing--30); /* 16 */
}

.mx-gallery__nav::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--white);
	-webkit-mask: url("../icons/Type=single.svg") center / contain no-repeat;
	mask: url("../icons/Type=single.svg") center / contain no-repeat;
}

/* Le chevron « simple » pointe vers le bas : on le tourne pour gauche / droite. */
.mx-gallery__nav-prev::before {
	transform: rotate(90deg);
}

.mx-gallery__nav-next::before {
	transform: rotate(-90deg);
}

.mx-gallery__stage:hover .mx-gallery__nav,
.mx-gallery__nav:focus-visible {
	opacity: 1;
}

.mx-gallery__nav:hover {
	background-color: var(--wp--preset--color--orange-dark);
}

.mx-gallery__nav:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 2px;
}

@media (hover: none) {
	.mx-gallery__nav { opacity: 1; } /* tactile : pas de survol, fleches toujours visibles */
}

@media (prefers-reduced-motion: reduce) {
	.mx-gallery__nav { transition: none; }
}

/* Miniatures : rangee defilable au doigt, sans scroll horizontal de page. */
.mx-gallery__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--wp--preset--spacing--20); /* 8 */
	overflow-x: auto;
}

/* Le <li> est le flex-item : c'est lui qui porte la largeur (cote Figma 174, plafonnee pour
   afficher 4 miniatures dans la colonne contrainte). Le <a> le remplit. */
.mx-gallery__thumbs > li {
	flex: 0 0 auto;
	width: 174px; /* cote Figma */
	max-width: 23%;
}

.mx-gallery__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 174 / 105; /* cote Figma */
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--mx-radius-s); /* 4 */
	padding: 0;
	background: none;
	cursor: pointer;
}

.mx-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Miniature active : bord jaune (cote Figma). */
.mx-gallery__thumb.is-current {
	border-color: var(--wp--preset--color--yellow);
}

.mx-gallery__thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 2px;
}

/* ---- Responsive : empilement (media puis texte), gouttiere reduite ---- */
@media (max-width: 900px) {
	.mx-media-texte {
		padding-block: var(--wp--preset--spacing--55); /* 80 */
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}

	/* Empilement 1 colonne pour TOUTES les variantes. On reprend les selecteurs desktop les plus
	   specifiques (is-media-droite, + galerie) car leur specificite (0,3,0 / 0,4,0) l'emporterait
	   sinon sur `.mx-media-texte__inner` (0,1,0) et garderait 2 colonnes sous 900px. */
	.mx-media-texte__inner,
	.mx-media-texte.is-media-galerie .mx-media-texte__inner,
	.mx-media-texte.is-media-droite .mx-media-texte__inner,
	.mx-media-texte.is-media-droite.is-media-galerie .mx-media-texte__inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50); /* 40 */
	}

	/* En empilement, le media revient toujours en premier (ordre de lecture). */
	.mx-media-texte.is-media-droite .mx-media-texte__media {
		order: 0;
	}

	.mx-gallery__thumbs > li {
		width: 128px;
		max-width: 30%;
	}
}