/*
 * Charte / design system Metal-X : primitives reutilisables.
 * Boutons (CTA), surtitres (eyebrow), titres a chevron, voiles de media, tokens de forme/motion.
 * Zero valeur en dur : tout vient des tokens theme.json (var --wp--preset--* et --wp--custom--*).
 * Les niveaux de titre (h1..h4) sont definis dans theme.json (styles.elements).
 * Construire d'abord, animer plus tard : etats en transform/opacity, prefers-reduced-motion respecte.
 */

:root {
	/* Tokens de forme et de motion : source unique, mappee depuis theme.json settings.custom.
	   (header.css / footer.css consomment --mx-radius et --mx-transition, definis ici une seule fois.) */
	--mx-radius-s: var(--wp--custom--radius--s); /* 4px */
	--mx-radius: var(--wp--custom--radius--m); /* 8px */
	--mx-transition: var(--wp--custom--motion--fast) var(--wp--custom--motion--ease); /* 150ms ease */
	/* Survol des CTA, centralise : le bouton primaire passe du jaune a un orange plus clair
	   (jamais vers le noir). Un seul endroit a regler. [hover non specifie en maquette, cf. CHARTE §7.3] */
	--mx-btn-hover-bg: var(--wp--preset--color--orange-middle);
}

/* ============================================================
   Empilement des sections pleine largeur
   ============================================================ */

/* Les sections de section du theme s'empilent BORD A BORD : on annule le "block gap" du layout flow de WP
   (qui glissait une bande du fond du body entre les sections, visible entre deux fonds contrastes). Le
   rythme vertical vient du padding propre a chaque section (+ eventuels filets de separation). */
.mx-hero,
.mx-media-texte,
.mx-slider,
.mx-logos,
.mx-badge,
.mx-linkedin {
	margin-block: 0;
}

/* ============================================================
   Boutons / CTA  (bloc core/button + styles is-style-metalx-*)
   Structure verrouillee ici ; le client choisit le style et edite le libelle.
   ============================================================ */

.wp-block-button.is-style-metalx-primaire > .wp-block-button__link,
.wp-block-button.is-style-metalx-lien > .wp-block-button__link {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm); /* 14, cote Figma cta */
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--mx-transition), color var(--mx-transition), border-color var(--mx-transition), transform var(--mx-transition);
}

/* -- Primaire : fond jaune, texte gris fonce -- */
.wp-block-button.is-style-metalx-primaire > .wp-block-button__link {
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--grey-dark);
	padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--50); /* 12 40 */
	border: 0;
	border-radius: var(--mx-radius-s); /* 4 */
}

/* Survol / focus : orange de marque plus clair que le repos (token centralise, jamais de noir). */
.wp-block-button.is-style-metalx-primaire > .wp-block-button__link:hover,
.wp-block-button.is-style-metalx-primaire > .wp-block-button__link:focus-visible {
	background-color: var(--mx-btn-hover-bg);
	color: var(--wp--preset--color--grey-dark);
}

/* Feedback au clic : leger enfoncement (transform only). */
.wp-block-button.is-style-metalx-primaire > .wp-block-button__link:active,
.wp-block-button.is-style-metalx-lien > .wp-block-button__link:active {
	transform: translateY( 1px );
}

.wp-block-button.is-style-metalx-primaire > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--grey-dark);
	outline-offset: 3px;
}

/* Desactive. */
.wp-block-button.is-style-metalx-primaire.is-disabled > .wp-block-button__link,
.wp-block-button.is-style-metalx-primaire > .wp-block-button__link[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* -- Lien / tertiaire : texte + fleche, sans fond. Le libelle se saisit SANS la fleche (ajoutee par le style).
   Spec confirmee par la page Carriere (liens de carte) : Titillium SemiBold 16, orange fonce, sans capitales. -- */
.wp-block-button.is-style-metalx-lien > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10); /* 4 */
	background-color: transparent;
	color: var(--wp--preset--color--orange-dark);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	font-weight: 600; /* SemiBold [conflit : woff2 Titillium 600 absent, rendu en 700] */
	text-transform: none;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.wp-block-button.is-style-metalx-lien > .wp-block-button__link::after {
	content: "→";
	transition: transform var(--mx-transition);
}

.wp-block-button.is-style-metalx-lien > .wp-block-button__link:hover,
.wp-block-button.is-style-metalx-lien > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--grey-dark);
}

.wp-block-button.is-style-metalx-lien > .wp-block-button__link:hover::after,
.wp-block-button.is-style-metalx-lien > .wp-block-button__link:focus-visible::after {
	transform: translateX(4px);
}

.wp-block-button.is-style-metalx-lien > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 3px;
}

/* ============================================================
   Titres et surtitres
   ============================================================ */

/* Surtitre (eyebrow) : Anta 16, orange fonce. Applicable a un Titre ou un Paragraphe (is-style-metalx-eyebrow). */
.is-style-metalx-eyebrow {
	font-family: var(--wp--preset--font-family--anta);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1;
	color: var(--wp--preset--color--orange-dark);
	margin: 0;
}

/* Variante titre de section prefixe d'un chevron (au lieu du surtitre au-dessus).
   Classe utilitaire posee sur le Titre. Chevron jaune (#ffb225, variable Figma, confirme). */
.mx-title-chevron {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20); /* 8 */
}

.mx-title-chevron::before {
	content: "";
	flex: 0 0 auto;
	width: 24px; /* cote Figma */
	height: 24px;
	background-color: var(--wp--preset--color--yellow); /* chevron jaune #ffb225 (variable Figma, confirme) */
	-webkit-mask: url("../icons/arrow_double-24x24.svg") center / contain no-repeat;
	mask: url("../icons/arrow_double-24x24.svg") center / contain no-repeat;
}

/* Utilitaire : titre en capitales (le H1 hero est en majuscules dans la maquette). */
.mx-caps {
	text-transform: uppercase;
}

/* ============================================================
   Fonds de section et voiles (methode §4 : image 100% + overlay CSS, jamais d'opacite sur l'image)
   ============================================================ */

.mx-media {
	position: relative;
	overflow: hidden;
}

.mx-media > img,
.mx-media .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile de couleur opt-in. Opacite = (100 - opacite de l'image dans Figma).
   Parametrable : --mx-veil-color, --mx-veil-opacity. Pour un degrade, poser un background linear-gradient a la place. */
.mx-media--veil::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var(--mx-veil-color, var(--wp--preset--color--black));
	opacity: var(--mx-veil-opacity, 0.5);
}

/* ============================================================
   Cartes  (page interne Carriere ; structure verrouillee, contenu editable)
   ============================================================ */

/* Carte "metier" : corps sombre a poser sous une image (image = radius haut, corps = radius bas).
   Le client remplit titre (H5) / citation (.mx-quote) / badges (.mx-tag) / lien (bouton metalx-lien). */
.wp-block-group.is-style-metalx-carte {
	background-color: var(--wp--preset--color--grey-dark);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--30); /* 32 16 */
	border-bottom: 2px solid var(--wp--preset--color--orange-middle);
	border-end-start-radius: var(--mx-radius-s); /* 4 */
	border-end-end-radius: var(--mx-radius-s);
}

/* Carte "temoignage" : fond clair. Contenu : avatar + citation (.mx-anta) + nom (.mx-anta) + role (.mx-meta).
   Look partage entre la carte Carriere (bloc groupe, texte CENTRE) et la carte du slider de temoignages
   (.mx-temoignage-card, texte FERRE A GAUCHE avec avatar centre, cf. bloc-temoignages.css + CHARTE). */
.wp-block-group.is-style-metalx-temoignage,
.mx-temoignage-card {
	background-color: var(--wp--preset--color--grey-ultralight);
	color: var(--wp--preset--color--grey-dark);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--45); /* 40 32 */
	border-radius: var(--mx-radius); /* 8 */
}

.wp-block-group.is-style-metalx-temoignage {
	text-align: center;
}

/* ============================================================
   Badges / tags, fil d'Ariane, citations, meta
   ============================================================ */

/* Badge / tag : pastille a contour (peut contenir une icone + un label). */
.mx-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10); /* 4 */
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); /* 4 8 */
	border: 1px solid var(--wp--preset--color--grey-light);
	border-radius: var(--mx-radius-s); /* 4 (homogeneise depuis 5) */
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	line-height: 1;
	color: var(--wp--preset--color--grey-light);
}

/* Fil d'Ariane (breadcrumb) : petit texte discret. */
.mx-breadcrumb {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs); /* 12 */
	color: var(--wp--preset--color--grey-light);
}

/* Liens du fil d'Ariane : couleur heritee, soulignes au survol/focus ; page courante un peu plus claire. */
.mx-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.mx-breadcrumb a:hover,
.mx-breadcrumb a:focus-visible {
	text-decoration: underline;
}
.mx-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--white);
}
/* Segment intermediaire decoratif (ex. « Services ») : non cliquable, teinte des liens. */
.mx-breadcrumb__deco {
	cursor: default;
}
.mx-breadcrumb__sep {
	opacity: 0.6;
}

/* Citation en italique (accroche de carte metier). Couleur heritee du contexte. */
.mx-quote {
	font-family: var(--wp--preset--font-family--titillium);
	font-style: italic;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
}

/* Texte Anta hors titres (citation et nom des temoignages). Taille/couleur selon contexte. */
.mx-anta {
	font-family: var(--wp--preset--font-family--anta);
	font-weight: 400;
	line-height: 1.2;
}

/* Meta / legende (role, anciennete, date) : Titillium 14, gris moyen. */
.mx-meta {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	color: var(--wp--preset--color--grey-middle);
}

/* ============================================================
   Liste a puces personnalisee  (.mx-list)
   Primitive reutilisable : liste sans puce native, marqueur "check" en masque sur token couleur.
   Le marqueur se colorise via --mx-list-marker (defaut orange-dark) ; l'icone vient de theme/assets/icons.
   ============================================================ */

.mx-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20); /* 8 (Figma 0, aere pour la lisibilite) */
}

.mx-list > li {
	display: flex;
	align-items: center; /* marqueur centre sur la ligne (cote Figma) */
	gap: var(--wp--preset--spacing--10); /* 4 */
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.2;
	color: inherit; /* suit le contexte de section (clair : grey-dark, sombre : blanc) */
}

.mx-list > li::before {
	content: "";
	flex: 0 0 auto;
	width: 24px; /* cote Figma 32, homogeneise sur l'echelle */
	height: 24px;
	background-color: var(--mx-list-marker, var(--wp--preset--color--orange-dark));
	-webkit-mask: url("../icons/Type=check.svg") center / contain no-repeat;
	mask: url("../icons/Type=check.svg") center / contain no-repeat;
}

/* ============================================================
   Carte logo  (.mx-logo-card)  — primitive reutilisable
   Meme taille pour tous, fond blanc + contour gris (le contour definit la carte, meme sur fond blanc).
   Le logo est CONTENU (object-fit: contain) et respire (padding interne), jamais colle au contour ;
   quel que soit son ratio, il tient sans deformation ni debordement.
   ============================================================ */

.mx-logo-card {
	box-sizing: border-box;
	flex: 0 0 auto; /* dans une piste flex (slider), garder la taille fixe (ne pas comprimer) */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 220px; /* cote Figma (219.688) */
	height: 83px; /* cote Figma */
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); /* 8 / 24 : exports 220x76, on laisse un peu d'air pour que le logo ne remplisse pas toute la carte */
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-light);
	border-radius: var(--mx-radius-s); /* 4 */
}

.mx-logo-card img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Repli texte (nom de l'entreprise) quand aucune image de logo n'est fournie. */
.mx-logo-card__fallback {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-middle);
	text-align: center;
}

/* ============================================================
   Accessibilite / preparation animation
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-metalx-primaire > .wp-block-button__link,
	.wp-block-button.is-style-metalx-lien > .wp-block-button__link,
	.wp-block-button.is-style-metalx-lien > .wp-block-button__link::after {
		transition: none !important;
	}
}

/* ============================================================
   Prose de lecture (.mx-prose) : pages de texte long (legal...).
   Largeur de lecture contenue (~72 caracteres), rythme et styles titres/listes/liens sur tokens de charte.
   ============================================================ */
.mx-prose {
	box-sizing: border-box;
	max-width: 760px; /* ~72 caracteres par ligne */
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--55); /* 80 */
	padding-inline: var(--wp--preset--spacing--40); /* 24 */
	color: var(--wp--preset--color--grey-dark);
}

.mx-prose > * {
	margin-block: 0;
}

.mx-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--40); /* 24 : rythme vertical */
}

.mx-prose h2 {
	margin-block-start: var(--wp--preset--spacing--55); /* 80 : respiration avant chaque section */
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--subtitle); /* 22 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-dark);
}

.mx-prose > h2:first-child {
	margin-block-start: 0;
}

.mx-prose h3 {
	margin-block-start: var(--wp--preset--spacing--45); /* 32 */
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--lg); /* 20 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-dark);
}

.mx-prose p,
.mx-prose li {
	font-family: var(--wp--preset--font-family--titillium);
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1.6; /* confort de lecture */
	color: var(--wp--preset--color--grey-dark);
}

.mx-prose ul,
.mx-prose ol {
	padding-inline-start: var(--wp--preset--spacing--45); /* 32 */
}

.mx-prose li + li {
	margin-block-start: var(--wp--preset--spacing--20); /* 8 */
}

.mx-prose a {
	color: var(--wp--preset--color--orange-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mx-prose a:hover,
.mx-prose a:focus-visible {
	text-decoration: none;
}

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