@charset "utf-8";

/*
 * Styles du thème Marcea — base, header/mega menu, footer.
 * Tokens : variables --wp--preset--* générées par WordPress depuis theme.json (ADR-002).
 * Source visuelle : maquettes Figma (header 949:7536, panneaux 945:7340…, footer 801:3588).
 */

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

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

body {
	margin: 0;
}

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

:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-secondaire);
	outline-offset: 2px;
}

/* Accessibilité : texte réservé aux lecteurs d'écran, skip link. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--blanc);
	white-space: normal;
}

.site-main {
	max-width: var(--wp--style--global--content-size, 75rem);
	margin-inline: auto;
	padding: 2rem 1.25rem;
}

/* ---------------------------------------------------------------------------
 * Boutons (maquette : padding 14/24, rayon 8, Sora 14 semibold)
 * ------------------------------------------------------------------------- */

.marcea-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.43;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.marcea-btn--primary {
	background: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
}

.marcea-btn--light {
	background: var(--wp--preset--color--bleu-clair);
	color: var(--wp--preset--color--bleu);
}

.marcea-btn--outline {
	background: transparent;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--bleu);
}

/* Variante jaune au repos (cartes logiciels de l'accueil). */
.marcea-btn--jaune {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir-profond);
}

/* Rollover animé (charte) : toutes les variantes passent en fond jaune,
 * texte bleu, quelle que soit leur couleur au repos. */
.marcea-btn--primary:hover,
.marcea-btn--light:hover,
.marcea-btn--outline:hover {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--bleu);
}

/* Le rollover de charte ne dirait rien d'un bouton déjà jaune : celui-ci prend
 * le fond des CTA primaires, soit l'inverse exact du sens habituel. La maquette
 * ne pose aucun état de survol pour lui (arbitrage du 2026-09-07). */
.marcea-btn--jaune:hover {
	background: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
}

/* ---------------------------------------------------------------------------
 * Header (maquette 949:7536) : barre blanche pleine largeur collée en haut,
 * arrondie 50px, backdrop blur — hauteur 91px sur desktop, sans ombre.
 * ------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: rgb(255 255 255 / 92%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 50px;
	transition: border-radius 0.3s ease;
}

/* Au scroll (JS ajoute .is-scrolled) : la barre perd ses coins arrondis et se
 * cale comme un bandeau plein en haut de page. */
.site-header.is-scrolled .site-header__bar {
	border-radius: 0;
}

.site-logo {
	display: block;
	flex: none;
	overflow: hidden;
}

/* Le PNG du logo embarque ~4 % de marge à gauche : on reproduit le cadrage
 * de la maquette (encre de 154 px de large, calée à 39 px du bord de la barre). */
.site-logo img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	margin-left: -3.93%;
}

/* ---------------------------------------------------------------------------
 * Navigation — structure commune (liste, boutons de rubrique)
 * ------------------------------------------------------------------------- */

.site-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__toggle {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.4375rem;
	border: 0;
	border-radius: 0.5rem;
	background: transparent;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.43;
	color: var(--wp--preset--color--bleu);
	cursor: pointer;
}

.site-nav__toggle svg {
	transition: transform 0.2s ease;
}

.site-nav__toggle[aria-expanded='true'] {
	background: var(--wp--preset--color--beige);
}

.site-nav__toggle[aria-expanded='true'] svg {
	transform: rotate(180deg);
}

/* Sous-entrée : pastille jaune + titre + description */
.mega-item {
	display: flex;
	gap: 1rem;
	padding: 0.5625rem 0.625rem;
	border-radius: 0.75rem;
	text-decoration: none;
	color: inherit;
}

.mega-item:hover,
.mega-item:focus-visible {
	background: var(--wp--preset--color--beige);
}

.mega-item__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.875rem;
	height: 2.875rem;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--bleu);
}

.mega-item:hover .mega-item__icon,
.mega-item:focus-visible .mega-item__icon {
	background: var(--wp--preset--color--jaune);
}

.mega-item__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

.mega-item__title {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--noir-profond);
}

.mega-item__desc {
	display: block;
	margin-top: 0.375rem;
	color: var(--wp--preset--color--gris-texte);
}

/* Bloc de réassurance */
.mega-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--bleu-clair) 30%, transparent);
	text-decoration: none;
	color: inherit;
}

.mega-card:hover,
.mega-card:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--bleu-clair) 50%, transparent);
}

.mega-card__eyebrow {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
	color: var(--wp--preset--color--gris-texte);
}

.mega-card__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.75;
	color: var(--wp--preset--color--noir-profond);
}

.mega-card__arrow {
	margin-top: auto;
	color: var(--wp--preset--color--noir-profond);
}

/* ---------------------------------------------------------------------------
 * Navigation desktop (≥ 1300px) : mega menu en panneaux
 * ------------------------------------------------------------------------- */

@media (min-width: 1300px) {
	.site-header__burger {
		display: none;
	}

	.site-header__bar {
		height: 91px;
		padding-inline: 36px 44px;
	}

	.site-logo {
		width: 167px;
		height: 63px;
	}

	.site-header__nav {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
	}

	/* Nav centrée sur la barre avec le décalage exact de la maquette (centre à
	 * 50% − 123,5 px). Pas de transform : les panneaux du mega menu doivent
	 * garder la barre comme containing block. */
	.site-nav {
		position: absolute;
		top: calc(50% - 17px);
		left: -247px;
		right: 0;
		margin-inline: auto;
		width: max-content;
	}

	/* 24 px visuels entre rubriques : les boutons portent déjà 7 px de padding. */
	.site-nav__list {
		gap: 10px;
	}

	/* Les rubriques sont statiques : le panneau se positionne par rapport au header. */
	.site-nav__item {
		position: static;
	}

	.site-header__cta {
		display: flex;
		flex: none;
		gap: 1rem;
	}

	/* fixed et non absolute : la nav (absolue) serait sinon le containing block.
	 * Le backdrop-filter de la barre capture les descendants fixed → le panneau
	 * se cale bien sur la barre (pleine largeur, sous la barre).
	 * top: 0 comme la maquette (le header est posé sur le panneau) : l'arête haute
	 * de l'ombre reste hors écran au lieu de traverser le milieu de la barre. */
	.mega-panel {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		padding-top: 136px;
		padding-bottom: 35px;
		background: var(--wp--preset--color--blanc);
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
		box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
	}

	.mega-panel__inner {
		display: grid;
		grid-template-columns: 1fr 21rem;
		gap: 34px;
		max-width: 75rem;
		margin-inline: auto;
	}

	.mega-panel__items {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
		row-gap: 0.625rem;
		align-content: start;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mega-card {
		min-height: 12.875rem;
	}
}

/* ---------------------------------------------------------------------------
 * Navigation mobile (< 1300px) : burger + accordéon
 * ------------------------------------------------------------------------- */

@media (max-width: 1299.98px) {
	.site-header__bar {
		padding: 0.5rem 1.25rem;
	}

	.site-logo {
		width: 116px;
		height: 44px;
	}

	.site-header__burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 10px;
		border: 0;
		border-radius: 0.5rem;
		background: transparent;
		cursor: pointer;
	}

	.site-header__burger-bar {
		display: block;
		width: 100%;
		height: 2px;
		border-radius: 1px;
		background: var(--wp--preset--color--bleu);
		transition:
			transform 0.2s ease,
			opacity 0.2s ease;
	}

	.site-header__burger[aria-expanded='true'] .site-header__burger-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.site-header__burger[aria-expanded='true'] .site-header__burger-bar:nth-child(2) {
		opacity: 0;
	}

	.site-header__burger[aria-expanded='true'] .site-header__burger-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.site-header__nav {
		display: none;
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0.5rem;
		right: 0.5rem;
		max-height: calc(100vh - 7rem);
		overflow-y: auto;
		padding: 0.5rem;
		background: var(--wp--preset--color--blanc);
		border-radius: 1rem;
		box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
	}

	.site-header.is-open .site-header__nav {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
	}

	.site-nav__item + .site-nav__item {
		border-top: 1px solid var(--wp--preset--color--bleu-clair);
	}

	.site-nav__toggle {
		width: 100%;
		justify-content: space-between;
		min-height: 44px;
		padding: 0.75rem;
	}

	.mega-panel {
		padding: 0.25rem 0.25rem 0.75rem;
	}

	.mega-panel__items {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mega-card {
		margin-top: 0.625rem;
	}

	.site-header__cta {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		padding: 0.75rem;
	}
}

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

.site-footer {
	margin-top: 2.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

/* Quand le bandeau question (marcea/question-cta) referme la page, sa couleur
 * pleine largeur doit toucher directement le bandeau newsletter (beige) qui
 * le suit : la marge par défaut laisserait un vide blanc entre les deux. */
main:has(.entry-content > .marcea-question:last-child) + .site-footer {
	margin-top: 0;
}

.site-footer__inner,
.site-footer__newsletter-inner {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Zone newsletter (visuelle en M1, fonctionnelle en M4) */
.site-footer__newsletter {
	background: var(--wp--preset--color--beige);
	padding-block: 1.5rem;
}

.site-footer__newsletter-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.site-footer__newsletter-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--noir-profond);
}

.site-footer__newsletter-desc {
	margin: 0.25rem 0 0;
	max-width: 32rem;
	color: var(--wp--preset--color--gris-texte);
}

.site-footer__newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.site-footer__newsletter-input {
	min-width: 18rem;
	padding: 0.875rem 1.25rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__newsletter-input::placeholder {
	color: var(--wp--preset--color--gris);
}

/* Formulaire CF7 (M4 lot D) : la ligne email + bouton reprend la disposition
 * statique, la ligne de consentement RGPD s'ajoute dessous. */
.site-footer__newsletter-form--cf7 {
	display: block;
	max-width: 34rem;
}

.marcea-newsletter__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
}

.marcea-newsletter__ligne .wpcf7-form-control-wrap {
	flex: 1 1 18rem;
}

.marcea-newsletter__ligne .site-footer__newsletter-input {
	width: 100%;
	min-width: 0;
}

.marcea-newsletter__consentement {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--gris-texte);
}

.marcea-newsletter__consentement .wpcf7-list-item {
	margin-left: 0;
}

.marcea-newsletter__consentement label {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.marcea-newsletter__consentement input[type='checkbox'] {
	margin-top: 0.1875rem;
}

.site-footer__newsletter-form--cf7 .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	color: #b32d2e;
	font-size: 0.875rem;
}

.site-footer__newsletter-form--cf7 .wpcf7-response-output {
	margin: 0.75rem 0 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 0.5rem;
}

/* Zone principale */
.site-footer__main {
	background: color-mix(in srgb, var(--wp--preset--color--bleu-clair) 50%, transparent);
	padding-block: 2.5rem;
}

.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 3.75rem;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	max-width: 17.25rem;
}

.site-footer__brand p {
	margin: 0;
	color: var(--wp--preset--color--noir-profond);
}

.site-footer__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--bleu-acier);
}

.site-footer__phone svg {
	color: var(--wp--preset--color--bleu-secondaire);
}

.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 3.75rem;
}

.site-footer__col-title {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--noir-profond);
}

.site-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__col a {
	text-decoration: none;
	color: var(--wp--preset--color--gris-texte);
}

.site-footer__col a:hover {
	color: var(--wp--preset--color--bleu-secondaire);
	text-decoration: underline;
}

/* Agences */
.site-footer__agencies {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 4rem;
	margin-top: 2.5rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--bleu-clair);
	border-bottom: 1px solid var(--wp--preset--color--bleu-clair);
}

.site-footer__agencies p {
	margin: 0;
	color: var(--wp--preset--color--gris-texte);
}

.site-footer__agencies .site-footer__col-title {
	margin-bottom: 0;
	color: var(--wp--preset--color--noir-profond);
}

/* Ligne légale + réseaux sociaux */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

.site-footer__credits {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--gris-texte);
}

.site-footer__credits p {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal a {
	text-decoration: none;
	color: inherit;
}

.site-footer__legal a:hover {
	color: var(--wp--preset--color--bleu-secondaire);
	text-decoration: underline;
}

.site-footer__social {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--bleu-secondaire);
}

/* ---------------------------------------------------------------------------
 * Gabarit « Vitrine » (page-templates/vitrine.php) : sections pleine largeur,
 * la largeur du contenu est portée par les groupes contraints de Gutenberg
 * (theme.json layout : contentSize 75rem / wideSize 90rem). ADR-004.
 * ------------------------------------------------------------------------- */

.site-main--vitrine {
	max-width: none;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * Sections vitrine (patterns marcea/*) — source : maquette Home 925:6371.
 * Le dégradé de marque (#202DA3 → #060F5C, stops 15.656 % / 86.447 %) est
 * partagé par le bandeau, le hero, les cartes solutions et le bandeau question.
 * ------------------------------------------------------------------------- */

.marcea-section {
	padding: 3.75rem 1.25rem;
}

.marcea-degrade-bleu {
	background: linear-gradient(-82deg, #202da3 15.656%, #060f5c 86.447%);
	color: var(--wp--preset--color--blanc);
}

/* Sections qui « recouvrent » la précédente (coins hauts arrondis, maquette). */
.marcea-section--arrondie {
	border-radius: 30px 30px 0 0;
}

/* Les sections vitrine commencent par leur titre : sans cette remise à zéro,
 * la marge UA du h2 (0.83em ≈ 29px) s'ajoute au padding de section et fausse
 * tous les espacements maquette. */
.marcea-section > h2:first-child {
	margin-top: 0;
}

/* Soulignement décoratif jaune sous une portion du titre (maquette). */
.marcea-titre-souligne {
	background: url('../img/vitrine/soulignement-jaune.svg') no-repeat bottom center;
	background-size: 233px 15px;
	padding-bottom: 1.25rem;
}

/* Variantes de boutons core (register_block_style, inc/setup.php). */
.wp-block-button .wp-block-button__link {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.wp-block-button.is-style-bleu-clair .wp-block-button__link {
	background: var(--wp--preset--color--bleu-clair);
	color: var(--wp--preset--color--bleu);
}

.wp-block-button.is-style-contour-blanc .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--blanc);
}

/* Variante jaune au repos, mêmes couleurs que .marcea-btn--jaune. */
.wp-block-button.is-style-jaune .wp-block-button__link {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir-profond);
}

/* Rollover animé (charte), identique aux .marcea-btn : toutes les variantes
 * passent en fond jaune, texte bleu, quelle que soit leur couleur au repos. */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.is-style-bleu-clair .wp-block-button__link:hover,
.wp-block-button.is-style-contour-blanc .wp-block-button__link:hover {
	background: var(--wp--preset--color--jaune);
	border-color: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--bleu);
}

/* Un bouton déjà jaune ne dirait rien du rollover de charte : il prend le fond
 * des CTA primaires, comme .marcea-btn--jaune:hover. */
.wp-block-button.is-style-jaune .wp-block-button__link:hover {
	background: var(--wp--preset--color--bleu-secondaire);
	border-color: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
}

/* Bandeau d'annonce (template-parts/header/announcement-banner.php) — maquette
 * 925:6419 : bande pleine largeur au-dessus du header, croix de fermeture à
 * droite. La classe marcea-bandeau-ferme est posée sur <html> avant le premier
 * rendu (script inline de inc/banner.php) : ni flash ni layout shift au retour
 * d'un visiteur qui a fermé le bandeau. */
.marcea-bandeau-annonce {
	position: relative;
	padding: 0.9375rem 3.25rem;
}

.marcea-bandeau-annonce p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: center;
}

.marcea-bandeau-annonce a {
	color: var(--wp--preset--color--jaune);
	font-weight: 800;
}

.marcea-bandeau-annonce__close {
	position: absolute;
	top: 50%;
	right: 1.5625rem;
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--blanc);
	cursor: pointer;
	transform: translateY(-50%);
}

.marcea-bandeau-ferme .marcea-bandeau-annonce {
	display: none;
}

/* Hero d'accueil (marcea/hero-accueil) — maquette : 30px entre titre,
 * accroche et boutons, photo calée à droite de la colonne. */
/* Maquette : 64px entre header et H1, 82px sous la photo. */
.marcea-hero {
	padding-block: 4rem 5.125rem;
}

/* Marges UA neutralisées : le padding de section porte l'espace vertical. */
.marcea-hero__colonnes {
	margin-bottom: 0;
}

.marcea-hero h1 mark {
	background: none;
}

.marcea-hero__texte h1 {
	margin-top: 0;
	margin-bottom: 1.875rem;
}

.marcea-hero__accroche {
	color: rgb(255 255 255 / 0.9);
	line-height: 1.78;
	margin-bottom: 1.875rem;
}

.marcea-hero__media {
	position: relative;
}

.marcea-hero__photo {
	display: flex;
	justify-content: flex-end;
	margin-block: 0;
}

.marcea-hero__photo img {
	border-radius: 24px;
}

/* Le bloc image pose `width: 524px; height: 524px; object-fit: cover` en style
 * inline. Dès que la colonne est plus étroite que 524px, la largeur est ramenée à
 * 100% mais la hauteur reste à 524px : la boîte devient portrait et rogne la photo
 * sur les côtés — 350×524 sur mobile, 464×524 à 1000px, alors qu'aucune source
 * n'est portrait (carrées ou paysage). La colonne n'atteint 524px qu'à partir de
 * ~1150px de viewport (mesuré : 514px de colonne à 1100px, 539px à 1150px), seuil
 * de cette règle. Au-delà, le recadrage carré de la maquette est intact.
 * `!important` est le seul moyen de repasser devant un style inline. */
@media (max-width: 1149.98px) {
	.marcea-hero__photo img {
		height: auto !important;
	}

	/* La colonne cesse de s'étirer sur la hauteur de la colonne de texte : les
	 * badges y sont ancrés par le bas (`bottom: 1rem`) et pendraient sous une
	 * photo devenue plus courte — 49px sous l'image de l'accueil à 1000px. */
	.marcea-hero__media {
		align-self: flex-start;
	}
}

.marcea-hero__badge {
	position: absolute;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border-radius: 12px;
	background: rgb(255 255 255 / 0.4);
	backdrop-filter: blur(10px);
	color: var(--wp--preset--color--noir-profond);
	font-weight: 600;
}

.marcea-hero__badge p {
	margin: 0;
}

.marcea-hero__badge--sage {
	top: 1.5rem;
	right: -3rem;
}

/* Sous 1380px, le badge « Sage certifié » déborderait à droite : on l'ancre à
 * gauche de la photo pour le garder dans le cadre. */
@media (max-width: 1380px) {
	.marcea-hero__badge--sage {
		right: auto;
		left: 0;
	}
}

.marcea-hero__badge--24h {
	bottom: 1rem;
	left: -2.5rem;
	max-width: 360px;
}

.marcea-hero__badge-icone {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	background: var(--wp--preset--color--jaune);
}

.marcea-hero__badge-icone img {
	width: 24px;
	height: auto;
}

/* Logos clients (marcea/logos-clients). Espacements maquette : 24px au-dessus
 * de l'accroche, 29px avant les logos, 53px sous. */
.marcea-logos {
	background: var(--wp--preset--color--blanc);
	border-radius: 0 0 32px 32px;
	position: relative;
	z-index: 1;
	padding: 1.5rem 1.25rem 3.3125rem;
}

.marcea-logos__accroche {
	color: #7e7d86;
	font-weight: 700;
	margin-top: 0;
}

.marcea-logos__rangee {
	gap: 3.75rem;
	margin-top: 1.8125rem;
}

/* Hauteur commune (maquette : 49px) et largeur ajustée au logo. Un emplacement
 * de largeur fixe laisserait du vide autour des logos étroits, vide qui
 * s'ajoute au gap et rend l'espacement optique inégal. La largeur reste bornée
 * à l'emprise de la maquette (135px) : un logo très allongé est alors réduit en
 * hauteur par object-fit plutôt qu'étiré. */
.marcea-logos__logo {
	flex: 0 0 auto;
	height: 49px;
	margin: 0;
}

.marcea-logos__logo img {
	width: auto;
	height: 100%;
	max-width: 135px;
	object-fit: contain;
}

/* Défilement automatique (marquee), activé par assets/js/logos-marquee.js qui
 * pose la classe is-scrolling et déplace les logos dans une piste .ruban.
 * La rangée devient plein-bord et masque le débordement horizontal. */
.marcea-logos.is-scrolling .marcea-logos__rangee {
	max-width: none;
	margin-inline: -1.25rem;
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow: hidden;
}

.marcea-logos__ruban {
	display: flex;
	align-items: center;
	gap: 3.75rem;
	width: max-content;
}

.marcea-logos.is-scrolling .marcea-logos__ruban.is-anime {
	animation: marcea-logos-defilement var(--marcea-logos-duree, 30s) linear infinite;
}

/* Arrêt au survol. */
.marcea-logos.is-scrolling .marcea-logos__rangee:hover .marcea-logos__ruban.is-anime {
	animation-play-state: paused;
}

@keyframes marcea-logos-defilement {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(var(--marcea-logos-decalage, 0));
	}
}

@media (prefers-reduced-motion: reduce) {
	.marcea-logos__ruban.is-anime {
		animation: none;
	}
}

/* Cartes domaines métier (marcea/cartes-solutions) — maquette : 80px sous le
 * bandeau logos, 74px entre titre souligné et cartes, 136px avant la fin du
 * dégradé. */
.marcea-cartes-solutions {
	margin-top: -32px;
	padding-top: calc(5rem + 32px);
	padding-bottom: 8.5rem;
}

.marcea-cartes-solutions .marcea-titre-souligne {
	margin-bottom: 3.375rem;
}

.marcea-cartes-solutions__grille {
	gap: 1rem;
	/* Marge UA neutralisée : le padding-bottom de section (136px) fait foi. */
	margin-bottom: 0;
}

/* Carte maquette : 308×339, contenu à 35px du haut, flèche à 44px du bas. */
.marcea-carte-domaine {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 339px;
	padding: 2.1875rem 1.5rem 2.75rem;
	border-radius: 24px;
	background: rgb(197 210 241 / 0.3);
	transition: background 0.2s ease;
}

/* Maquette : 16px entre titre et texte — la marge du texte fait foi ; en flex
 * les marges ne fusionnent pas, celle du h3 s'additionnerait. */
.marcea-carte-domaine h3 {
	margin-block: 0;
}

/* !important : en flex, le margin-inline auto !important du layout constrained
 * rétrécirait et centrerait titre et texte — ils restent alignés à gauche. */
.marcea-carte-domaine > * {
	margin-inline: 0 !important;
	width: 100%;
}

/* Flèche calée en bas de carte (alignée d'une carte à l'autre) et à gauche
 * (!important : neutralise le centrage du layout constrained). line-height 1 :
 * la flèche occupe 24px comme l'icône maquette, pas une ligne de texte de 38px. */
.marcea-carte-domaine__lien {
	margin: auto 0 0 !important;
	line-height: 1;
}

.marcea-carte-domaine__lien a span {
	display: inline-block;
	transition: transform 0.2s ease;
}

/* Toute la carte est cliquable : le lien flèche est étendu à la carte. */
.marcea-carte-domaine__lien a {
	color: var(--wp--preset--color--blanc);
	font-size: 1.5rem;
	text-decoration: none;
}

.marcea-carte-domaine__lien a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 24px;
}

.marcea-carte-domaine:hover {
	background: rgb(197 210 241 / 0.45);
}

.marcea-carte-domaine:hover .marcea-carte-domaine__lien a span {
	transform: translateX(0.5rem);
}

.marcea-carte-domaine__lien a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--jaune);
	outline-offset: 2px;
}

/* Logiciels vendus en ligne (marcea/logiciels-cles + bloc marcea/cartes-logiciels)
 * — maquette : 47px sous le dégradé des cartes solutions, 8px entre titre et
 * accroche, 49px avant les cartes. La section ne porte aucun padding bas : les
 * 106px qui la séparent de l'encart suivant sont portés par la marge de l'encart,
 * comme partout ailleurs sur la page. */
.marcea-logiciels {
	padding-top: 2.9375rem;
	padding-bottom: 0;
}

.marcea-logiciels > h2 {
	margin-bottom: 0.5rem;
}

.marcea-logiciels > h2 + p {
	margin-block: 0;
}

.marcea-logiciels__grille {
	gap: 1rem;
	margin-block: 3.0625rem 0;
}

.marcea-logiciels + .marcea-encart {
	margin-top: 6.625rem;
}

/* Carte maquette : 416×556, photo de 237 puis contenu à 24px des bords. */
.marcea-carte-logiciel {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 556px;
	border-radius: 16px;
	background: var(--wp--preset--color--beige);
	overflow: hidden;
}

.marcea-carte-logiciel__image {
	margin: 0;
}

.marcea-carte-logiciel__image img {
	display: block;
	width: 100%;
	height: 237px;
	object-fit: cover;
}

/* Maquette : titre à 19px sous la photo, lien à 21px du bas de carte. */
.marcea-carte-logiciel__contenu {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.1875rem 1.5rem 1.3125rem;
}

/* En flex les marges ne fusionnent pas : l'écart titre → description (8px) est
 * porté par la description seule. */
.marcea-carte-logiciel h3 {
	margin-block: 0;
}

.marcea-carte-logiciel__desc {
	margin-block: 0.5rem 0;
}

/* Le groupe prix + CTA + lien est calé en pied de carte : c'est ce qui l'aligne
 * d'une carte à l'autre malgré la description de Kalitics, en quatre lignes là
 * où les deux autres en font trois (maquette). */
.marcea-carte-logiciel__prix {
	margin: auto 0 0;
	color: var(--wp--preset--color--bleu);
	font-size: var(--wp--preset--font-size--small);
	/* Interligne relatif et non absolu : c'est le montant, plus gros, qui doit
	 * dicter la ligne — 18px × 1,5 donne les 27px de la maquette. */
	line-height: 1.5;
	text-align: center;
}

.marcea-carte-logiciel__prix strong {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
}

/* Bouton pleine largeur (368px dans la maquette) : le display flex remplace
 * l'inline-flex du bouton, qui se serait ajusté à son libellé. */
.marcea-carte-logiciel__cta {
	display: flex;
	margin-top: 0.625rem;
}

/* Interligne naturel plutôt que les 1,6 du corps : la maquette laisse cette
 * ligne à son plomb par défaut (18px pour du Sora 14), et c'est lui qui cale
 * tout le groupe de pied — prix, bouton et lien — à sa hauteur maquette. */
.marcea-carte-logiciel__lien {
	margin: 1.3125rem 0 0;
	line-height: normal;
	text-align: center;
}

.marcea-carte-logiciel__lien a {
	font-weight: 800;
}

/* Encarts mascotte (marcea/encart-mascotte-*) : filigrane « M » calé à droite
 * sur toute la hauteur du bloc (le border-radius clippe le background), mascotte
 * décalée à gauche et dépassant sous l'encart. */
.marcea-encart {
	position: relative;
	/* Maquette : 122px de respiration au-dessus et en dessous des encarts.
	 * Carte de 1063px centrée, texte de 760px centré dedans (l'instance Figma
	 * fait 1159px car elle inclut la mascotte qui déborde à gauche). */
	margin: 7.5rem auto;
	max-width: 66.4375rem;
	/* Maquette : contenu à 40px du haut, 33px sous le bouton (carte de 290px). */
	padding: 2.5rem clamp(1.5rem, 14vw, 9.5rem) 2.0625rem;
	border-radius: 24px;
	background: url('../img/vitrine/filigrane-m.svg') no-repeat right -140px bottom -15px / auto
		140%;
}

.marcea-encart--beige {
	background-color: var(--wp--preset--color--beige);
}

.marcea-encart--bleu-clair {
	background-color: rgb(197 210 241 / 0.3);
}

.marcea-encart__mascotte {
	position: absolute;
	left: -6rem;
	bottom: -3rem;
	margin: 0;
}

.marcea-encart__mascotte img {
	width: clamp(150px, 18vw, 260px);
	height: auto;
}

/* Rythme maquette : 11px entre titre et texte, 28px avant le bouton — la marge
 * UA du h2 est neutralisée, l'écart est porté par l'élément qui suit. */
.marcea-encart__contenu h2 {
	margin-block: 0;
}

.marcea-encart__contenu > * + * {
	margin-top: 0.6875rem;
}

.marcea-encart__contenu > .wp-block-buttons {
	margin-top: 1.75rem;
}

/* Accompagnement en 4 étapes (marcea/accompagnement-etapes). Espacements
 * maquette : l'encart qui précède porte les 120px au-dessus du titre, 8px
 * entre titre et sous-titre, 40px autour de la grille, 106px avant la section
 * suivante. */
.marcea-encart + .marcea-accompagnement {
	padding-top: 0;
}

.marcea-accompagnement {
	padding-bottom: 6.625rem;
}

.marcea-accompagnement > h2 {
	margin-bottom: 0.5rem;
}

.marcea-accompagnement > h2 + p {
	margin-block: 0;
}

.marcea-accompagnement__grille {
	gap: 1rem;
	margin-block: 2.5rem;
}

.marcea-carte-etape {
	height: 100%;
	padding: 2rem 1.5rem;
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
}

/* !important : le layout constrained centre les enfants étroits via
 * margin-inline auto !important — la pastille reste calée à gauche (maquette). */
.marcea-pastille-icone {
	display: grid;
	place-items: center;
	/* La pastille est un carré de 46px : dans un parent flex dont le contenu
	 * déborde (carte bénéfice figée à 315px au survol), elle est le seul enfant
	 * réductible sous sa taille déclarée — sa hauteur minimale automatique vaut
	 * les 24px de l'icône, et le carré s'aplatit en rectangle. */
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	margin: 0 0 1.5rem !important;
	border-radius: 8px;
	background: var(--wp--preset--color--jaune);
}

.marcea-pastille-icone img {
	width: 24px;
	height: auto;
}

/* Cas client vidéo (marcea/cas-client-video). Espacements maquette : 50px
 * au-dessus du titre, 8px avant le sous-titre, 50px avant la vidéo, 79px
 * sous la vidéo. La variante produit garde les paddings de section. */
.marcea-cas-client:not(.marcea-cas-client--produit) {
	padding-block: 3.125rem 4.9375rem;
}

.marcea-cas-client > h2 {
	margin-bottom: 0.5rem;
}

.marcea-cas-client__sous-titre {
	color: rgb(255 255 255 / 0.8);
	margin-block: 0;
}

.marcea-cas-client__video {
	position: relative;
	max-width: 948px;
	margin-top: 3.125rem;
	margin-inline: auto;
}

.marcea-cas-client__embed {
	margin: 0;
}

.marcea-cas-client__embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 948 / 529;
	height: auto;
	border-radius: 24px;
}

.marcea-cas-client__legende {
	pointer-events: none;
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.5rem 1.25rem;
	border-radius: 8px;
	background: rgb(5 23 24 / 0.7);
	color: var(--wp--preset--color--blanc);
	white-space: nowrap;
	max-width: calc(100% - 3rem);
}

/* Témoignages (marcea/temoignages) : carrousel calé sur la grille wide à
 * gauche et débordant jusqu'au bord droit de l'écran (maquette). Cartes de
 * 524px ; flèches injectées par assets/js/temoignages-carrousel.js.
 * Espacements maquette : 106px au-dessus des cartes, 23px avant les flèches,
 * 32px sous les flèches. */
.marcea-temoignages {
	padding-block: 6.625rem 2rem;
}

.marcea-temoignages .marcea-temoignages__carrousel {
	/* Rangée flex portée par le thème (le bloc marcea/liste-ressources rend le
	 * carrousel sans les classes de layout Gutenberg) ; cartes de même hauteur
	 * (maquette) : étoiles et auteur restent calés en bas. */
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1rem;
	margin-inline: -1.25rem;
	padding-inline: max(1.25rem, calc((100% - 80rem) / 2 + 1.25rem));
	/* Pas de scroll-snap : au chargement il colle la première carte au bord de
	 * l'écran (hors grille), et les positions d'accroche des dernières cartes
	 * dépassent le scroll maximal (débattement inférieur à une carte). */
	overflow-x: auto;
	scrollbar-width: none;
	/* Sans contain, le flex-basis en vw des cartes (min(32.75rem, 85vw)) fuit
	 * dans le scrollWidth du document malgré l'overflow-x: auto — scroll
	 * horizontal fantôme sur toute la page en mobile. */
	contain: layout;
}

.marcea-temoignages__carrousel::-webkit-scrollbar {
	display: none;
}

.marcea-temoignages__carrousel .marcea-carte-temoignage {
	flex: 0 0 min(32.75rem, 85vw);
}

.marcea-temoignages__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	max-width: 80rem;
	margin: 1.4375rem auto 0;
}

.marcea-temoignages__fleche {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--bleu);
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;
}

.marcea-temoignages__fleche:hover:not([disabled]) {
	background: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
}

.marcea-temoignages__fleche[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* La hauteur vient de l'étirement flex du carrousel (cartes égales, maquette).
 * Rythme vertical maquette : 17 en haut, guillemets 60 collés à la citation,
 * 18 avant les étoiles, 18 avant l'auteur, 20 en bas. */
.marcea-carte-temoignage {
	display: flex;
	flex-direction: column;
	padding: 1.0625rem 1.5rem 1.25rem;
	border-radius: 16px;
	background: var(--wp--preset--color--blanc);
}

.marcea-carte-temoignage__guillemets {
	margin: 0 auto;
	width: 60px;
}

/* La citation (interligne 20px maquette). */
.marcea-carte-temoignage > p:first-of-type {
	margin-block: 0;
	line-height: 1.43;
}

/* Étoiles + auteur calés en bas de carte quelle que soit la citation. */
.marcea-carte-temoignage__etoiles {
	margin-top: auto;
	padding-top: 1.125rem;
	color: var(--wp--preset--color--jaune);
	font-size: 1.125rem;
	letter-spacing: 3px;
	line-height: 1;
}

.marcea-carte-temoignage__auteur {
	color: var(--wp--preset--color--noir-profond);
	margin-block: 0;
}

/* Actus (marcea/actus). Espacements maquette : 70px au-dessus du titre (sur
 * deux lignes, largeur 1064px), 30px avant le CTA, 50px avant les cartes,
 * 96px avant le bandeau question. */
.marcea-temoignages + .marcea-actus {
	padding-top: 4.375rem;
}

.marcea-actus {
	padding-bottom: 6rem;
}

.marcea-actus > h2 {
	max-width: 66.5rem;
	margin-bottom: 1.875rem;
}

.marcea-actus > .wp-block-buttons {
	margin-bottom: 3.125rem;
}

.marcea-actus__grille {
	gap: 1rem;
	margin-bottom: 0;
}

.marcea-carte-actu {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 16px;
	background: var(--wp--preset--color--beige);
	overflow: hidden;
}

/* !important : en flex, le margin-inline auto !important du layout constrained
 * rétrécirait image et contenu — les enfants restent pleine largeur. */
.marcea-carte-actu > * {
	margin-inline: 0 !important;
	width: 100%;
}

.marcea-carte-actu__image {
	margin: 0;
}

.marcea-carte-actu__image img {
	width: 100%;
	height: 237px;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Léger zoom de l'image au survol de la carte (la carte est overflow: hidden). */
.marcea-carte-actu:hover .marcea-carte-actu__image img {
	transform: scale(1.05);
}

/* Titre cliquable des cartes dynamiques (bloc marcea/dernieres-actualites) :
 * même rendu que le h3 statique de M2. */
.marcea-carte-actu h3 a {
	color: inherit;
	text-decoration: none;
}

.marcea-carte-actu__contenu {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.25rem 1.5rem 1.5rem;
}

/* « Lire la suite » calé en bas de carte sur les trois blocs, à gauche
 * (!important : neutralise le centrage du layout constrained). */
.marcea-carte-actu__lien {
	margin: auto 0 0 !important;
	padding-top: 1rem;
}

.marcea-carte-actu__lien a {
	color: var(--wp--preset--color--bleu-secondaire);
	font-weight: 800;
}

/* Bandeau question (marcea/question-cta). */
.marcea-question {
	/* Hauteur maquette : 226px. */
	padding-block: 3rem 2.9375rem;
	overflow: hidden;
	background-image:
		url('../img/vitrine/decor-chevrons.svg'), url('../img/vitrine/decor-cercle.svg'),
		linear-gradient(-61.68deg, #202da3 15.656%, #060f5c 86.447%);
	background-repeat: no-repeat;
	background-position:
		right -20px center,
		right 230px bottom,
		center;
}

.marcea-question .marcea-titre-souligne {
	background-position: bottom left 25%;
	background-size: 201px 15px;
}

/* FAQ (marcea/faq) : accordéon via le bloc core details. */
.marcea-faq {
	padding: 3.75rem 1.25rem;
}

/* Bloc dynamique FAQ imbriqué dans la section : le groupe porte déjà le padding. */
.marcea-faq .marcea-faq {
	padding: 0;
}

.marcea-faq__item {
	border-bottom: 1px solid rgb(197 210 241 / 0.5);
	padding: 1.375rem 0;
}

.marcea-faq__item summary {
	position: relative;
	padding-right: 4rem;
	list-style: none;
	cursor: pointer;
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.65;
}

.marcea-faq__item summary::-webkit-details-marker {
	display: none;
}

.marcea-faq__item summary::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 47px;
	height: 47px;
	border-radius: 8px;
	background:
		url('../img/vitrine/faq-plus.svg') no-repeat center,
		var(--wp--preset--color--jaune);
}

.marcea-faq__item[open] summary::after {
	background-image: url('../img/vitrine/faq-moins.svg');
}

/* Hero de page intérieure (marcea/hero-page). */
.marcea-hero--page {
	text-align: center;
}

.marcea-hero__surtitre {
	color: rgb(255 255 255 / 0.8);
	margin-bottom: 0.5rem;
}

/* Hero produit/domaine (marcea/hero-produit) — maquettes 913:5302 / 809:3394 :
 * colonne texte (H1, accroche, puces sombres, CTA), photo 524×524 à droite,
 * badge « facturation électronique » flottant sur le coin de la photo. */
.marcea-hero--produit .marcea-hero__accroche {
	margin-bottom: 1.875rem;
}

.marcea-hero--produit .marcea-checklist {
	margin-block: 0 1.875rem;
}

/* Ancré depuis la droite : la photo (524px) est calée au bord droit de la
 * colonne, le badge chevauche son coin haut-gauche de 126px (maquette). */
.marcea-hero__badge--facture {
	top: 2rem;
	right: 24.875rem;
	background: var(--wp--preset--color--blanc);
	padding: 0.75rem 1.5rem;
}

.marcea-hero__badge--facture img {
	width: 176px;
	height: auto;
}

/* Badges pill (bloc produit, tarifs). */
.marcea-badge {
	display: inline-block;
	padding: 0.25rem 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir-profond);
	font-size: 0.75rem;
	font-weight: 600;
}

.marcea-badge--bleu {
	background: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
}

/* Checklist à coche (heros, blocs produit, tarifs, déclinaisons) — maquette :
 * puces « chip » fond beige radius 8, carré de coche jaune 24×24 radius 4. */
.marcea-checklist {
	list-style: none;
	padding: 0;
}

.marcea-checklist li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	max-width: 100%;
	padding: 0.5rem 0.625rem;
	margin-bottom: 0.375rem;
	border-radius: 8px;
	background: var(--wp--preset--color--beige);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
	color: var(--wp--preset--color--gris-texte);
}

/* Coche en SVG (pas de glyphe texte : la feuille peut être décodée hors UTF-8
 * et le glyphe ne correspond pas à l'icône Check des maquettes). */
.marcea-checklist li::before {
	content: '';
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background:
		url('../img/vitrine/coche.svg') no-repeat center,
		var(--wp--preset--color--jaune);
}

/* Variante sombre des puces (hero produit, fond dégradé). */
.marcea-checklist--sombre li {
	background: rgb(197 210 241 / 0.3);
	color: var(--wp--preset--color--blanc);
}

/* Badge « Nouveau » dans une puce (tarifs) : surlignage inline mis en pilule
 * (le rich text d'un item de liste n'accepte que les formats natifs — mark). */
.marcea-checklist mark {
	margin-left: 0.25rem;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Bloc produit (marcea/bloc-produit). */
.marcea-bloc-produit {
	margin: 3.75rem auto;
	padding: 2.5rem;
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
}

/* Sur carte beige, les puces chips passent en blanc pour rester lisibles. */
.marcea-bloc-produit .marcea-checklist li {
	background: var(--wp--preset--color--blanc);
}

/* Bloc produit avec visuel (marcea/bloc-produit-visuel) — maquettes 822:4598…,
 * 913:5336 : carte bleue 524×524 radius 24 portant une capture d'écran radius 8
 * décalée (22/62 px) et rognée aux limites de la carte ; colonne texte en face.
 * L'alternance gauche/droite se fait par l'ordre des colonnes dans le contenu. */
.marcea-bloc-visuel__colonnes {
	gap: 2.5rem;
	align-items: flex-start;
}

.marcea-carte-capture {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 24px;
	background: var(--wp--preset--color--bleu);
}

.marcea-carte-capture img {
	position: absolute;
	left: 4.2%;
	top: 11.8%;
	width: 99.6%;
	max-width: none;
	height: auto;
	border-radius: 8px;
}

/* Captures posées en 546×380 à 13/84 px dans la carte de 524, là où les autres
 * fiches produit calent la leur à 22/62 : « Saisie des journaux » de
 * /sage-100-comptabilite/ (maquette 1413:10547), « Tableau de bord » de
 * /sage-50/ (maquette 1430:12299 — même géométrie au pixel), « Favoris » de
 * Sage 100 Gestion Commerciale (1592:9459) et « Analyse des paiements » de Sage
 * 100 Gestion de Production (1592:9453). Un modificateur par capture pour une
 * géométrie commune, portés par ces seules pages : la règle partagée ci-dessus
 * reste la géométrie des autres captures. */
.marcea-carte-capture--journaux img,
.marcea-carte-capture--tableau-bord img,
.marcea-carte-capture--gestion-commerciale img,
.marcea-carte-capture--production img {
	left: 2.48%;
	top: 16.03%;
	width: 104.2%;
}

/* Capture « Chantiers » de /sage-batigest/ (maquette 1430:12306) : troisième
 * géométrie du composant. Le cadre de l'image y mesure 559×380 à 0/84 px, mais
 * le remplissage est décalé À L'INTÉRIEUR de ce cadre — la métadonnée Figma
 * donne le cadre, pas le calage du visuel. Les valeurs ci-dessous sont donc
 * ajustées par comparaison au rendu de la maquette (RMSE 0,068 contre 0,135
 * pour un calage à 0/84) : le visuel garde son ratio, sa barre latérale sort à
 * gauche et son panneau de droite reste entier, comme sur la maquette. */
.marcea-carte-capture--chantiers img {
	left: -9.92%;
	top: 16.79%;
	width: 106.68%;
}

/* Capture « Analytique chantier » de Kalitics (maquette 1598:9463) : quatrième
 * géométrie du composant. Le visuel y mesure 515×331 à 9/106 px dans la carte de
 * 524 — il s'arrête pile à son bord droit, et le cadre Figma clippe déjà les
 * 43 px de large qui dépassent, donc le fichier servi est exactement ce que
 * montre la maquette (vérifié par comparaison de rendus, RMSE 1,6 %, résidu
 * d'anticrénelage du rééchantillonnage 2×). Portée par /kalitics/ et /btp/, les
 * deux pages qui présentent ce produit. */
.marcea-carte-capture--analytique img {
	left: 1.72%;
	top: 20.23%;
	width: 98.28%;
}

/* Capture « Tableau de bord DAF » de /sage-intacct/ (maquette 1474:8393) :
 * cinquième géométrie du composant. Le cadre Figma (538×387 à −2/69) décrit une
 * fois de plus le cadre et non le calage du remplissage — le reproduire donne un
 * RMSE de 29 % contre le rendu de la maquette. Les valeurs ci-dessous sont
 * ajustées par comparaison de rendus (RMSE 3,0 %, contre 22 % pour la règle
 * partagée et 35 % pour le groupe « journaux ») : le visuel garde son ratio et
 * s'arrête juste avant le bord droit de la carte, sa barre de titre sombre
 * restant entière en haut. Portée par /sage-intacct/ seule. */
.marcea-carte-capture--intacct img {
	left: 1.91%;
	top: 12.79%;
	width: 96.76%;
}

.marcea-bloc-visuel__texte > * + * {
	margin-top: 1rem;
}

.marcea-bloc-visuel__texte .marcea-checklist {
	margin-block: 1.875rem;
}

/* Cartes bénéfices / Sage Copilot (marcea/cartes-benefices) — composant
 * « Bloc roll over » : carte beige 243×315 radius 24, pastille jaune, titre,
 * flèche décorative calée en bas. Survol (variante 845:4746) : dégradé bleu,
 * flèche masquée, description révélée et bloc pastille + titre remonté de 40px
 * (74px → 34px de padding haut). Le survol n'est armé qu'au-delà de 1300px, là
 * où la grille rend les cartes à leur largeur de maquette (243px) : la hauteur
 * de 315px absorbe alors la description sans faire grandir la rangée. En
 * dessous, et sur les appareils sans survol, la description reste affichée. */
.marcea-benefices__grille {
	gap: 1rem;
}

.marcea-carte-benefice {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 315px;
	padding: 4.625rem 1.5rem 1.875rem;
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
}

/* !important : le layout constrained pose `margin-inline: auto` sur chaque
 * enfant, ce qui centre tout bloc plus étroit que la carte — invisible à la
 * largeur de maquette (le titre remplit la carte), mais le titre se centrait
 * dès que les colonnes s'empilent. Le contenu de la carte est aligné à gauche
 * à toutes les largeurs. */
.marcea-carte-benefice > * {
	margin-inline: 0 !important;
}

.marcea-carte-benefice h3 {
	color: var(--wp--preset--color--noir-profond);
	margin-block: 0;
}

/* Écarts internes de la maquette : 18px sous la pastille, 8px avant la
 * description. Les marges des enfants ne fusionnent pas (conteneur flex), elles
 * s'ajoutent : sans ce recalage la carte dépassait ses 315px et la rangée
 * grandissait au survol. !important : le raccourci de la pastille partagée.
 * Portée limitée à la carte bénéfice — la pastille sert aussi ailleurs. */
.marcea-carte-benefice .marcea-pastille-icone {
	margin-bottom: 1.125rem !important;
}

.marcea-carte-benefice__description {
	margin: 0.5rem 0 0;
	line-height: 1.25rem;
}

/* !important : neutralise le centrage du layout constrained (comme la pastille). */
.marcea-carte-benefice__fleche {
	margin: auto 0 0 !important;
}

.marcea-carte-benefice__fleche img {
	width: 24px;
	height: auto;
}

@media (min-width: 1300px) and (hover: hover) {
	/* La carte garde sa boîte — les 315px de la maquette, débordement masqué :
	 * le survol ne joue que sur des transformations et des opacités, donc la
	 * rangée ne bouge pas d'un pixel. La description attend sous le bord bas,
	 * invisible, et remonte avec la pastille et le titre. Les 3 lignes de titre
	 * maximum des 10 cartes tiennent dans les 315px ; un titre plus long serait
	 * rogné. */
	.marcea-carte-benefice {
		position: relative;
		height: 315px;
		overflow: hidden;
	}

	.marcea-carte-benefice .marcea-pastille-icone,
	.marcea-carte-benefice h3 {
		transition: transform 0.25s ease;
	}

	.marcea-carte-benefice__description {
		opacity: 0;
		transition:
			transform 0.25s ease,
			opacity 0.25s ease;
	}

	/* Hors flux : la flèche ne bouge pas pendant qu'elle s'efface. */
	.marcea-carte-benefice__fleche {
		position: absolute;
		bottom: 1.875rem;
		left: 1.5rem;
		margin: 0 !important;
		transition: opacity 0.25s ease;
	}

	/* Dégradé de la maquette aplati sur le fond blanc de la section : les deux
	 * arrêts y sont posés à 30% d'opacité (#EDF2FF et #9CB2E7). */
	.marcea-carte-benefice:hover {
		background: linear-gradient(201.54deg, #fafbff 21.24%, #e1e8f8 72.76%);
	}

	/* 40px : l'écart entre les deux états de la maquette (pastille à 74px, puis
	 * à 34px). La description suit le titre pour rester à 8px sous lui. */
	.marcea-carte-benefice:hover .marcea-pastille-icone,
	.marcea-carte-benefice:hover h3,
	.marcea-carte-benefice:hover .marcea-carte-benefice__description {
		transform: translateY(-40px);
	}

	.marcea-carte-benefice:hover .marcea-carte-benefice__description {
		opacity: 1;
	}

	.marcea-carte-benefice:hover .marcea-carte-benefice__fleche {
		opacity: 0;
	}
}

/* Cartes bénéfices des sept fiches produit. La géométrie vient de la maquette
 * 1413:10547 (« bloc compta » : 243×350 au lieu de 243×315, flèche à 35px du bas
 * au lieu de 30), mais plus sa hauteur : depuis que les descriptions portent
 * l'argumentaire produit de Marcea au mot près (ADR-038), la plus longue —
 * « Un vrai ERP, pas une somme d'outils juxtaposés » sur /kalitics/ — demande
 * 317px de titre + description. Le budget du README donne alors
 * 317 + 106 + 35 = 458px, arrondis à 460. Une seule hauteur pour les sept
 * pages : elles tirent toutes du même document, et un palier par page ferait
 * sept modificateurs pour une règle d'une ligne. */
.marcea-benefices__grille--haute .marcea-carte-benefice {
	min-height: 460px;
	padding-bottom: 2.1875rem;
}

@media (min-width: 1300px) and (hover: hover) {
	.marcea-benefices__grille--haute .marcea-carte-benefice {
		height: 460px;
	}

	.marcea-benefices__grille--haute .marcea-carte-benefice__fleche {
		bottom: 2.1875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.marcea-carte-benefice .marcea-pastille-icone,
	.marcea-carte-benefice h3,
	.marcea-carte-benefice__description,
	.marcea-carte-benefice__fleche {
		transition: none;
	}
}

/* Cartes déclinaisons Sage 100 (marcea/cartes-declinaisons) — maquette 913:5347 :
 * carte blanche bordée bleu-secondaire radius 10, CTA « Découvrir … », filet,
 * fonctionnalités en puces chips, lien fiche produit. */
.marcea-declinaisons__grille {
	gap: 1rem;
	max-width: 53.125rem;
	margin-inline: auto;
}

.marcea-carte-declinaison {
	height: 100%;
	padding: 2rem 1.5rem;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 10px;
	background: var(--wp--preset--color--blanc);
}

.marcea-carte-declinaison h3 {
	color: var(--wp--preset--color--noir-profond);
	font-size: var(--wp--preset--font-size--heading-s);
}

.marcea-carte-declinaison__sous {
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--small);
}

.marcea-carte-declinaison hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--bleu-secondaire);
	margin: 1.5rem -1.5rem;
}

.marcea-carte-declinaison__fiche a {
	color: var(--wp--preset--color--bleu-secondaire);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Lignes modules téléchargeables (marcea/modules-telechargement) — maquette
 * 928:6839… : lignes 70px radius 8 en alternance beige/blanc, bouton
 * téléchargement jaune 46×46 aligné à droite. */
.marcea-modules__liste > .marcea-ligne-module:nth-child(odd) {
	background: var(--wp--preset--color--beige);
}

.marcea-ligne-module {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.75rem 1.5rem;
	margin-bottom: 0.5rem;
	border-radius: 8px;
}

/* !important : en flex, le layout constrained centre et rétrécit les enfants. */
.marcea-ligne-module > * {
	margin: 0 !important;
}

.marcea-ligne-module__texte {
	flex: 1;
}

.marcea-ligne-module__texte p {
	margin: 0;
}

.marcea-ligne-module__titre {
	font-weight: 700;
}

.marcea-ligne-module__desc {
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--small);
}

.marcea-ligne-module__dl {
	flex: none;
}

.marcea-ligne-module__dl a {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	background: var(--wp--preset--color--jaune);
}

/* Réassurance « Pourquoi passer par Marcea ? » (marcea/reassurance-marcea) —
 * symbol 928:7101 : carte beige 1280 radius 24, photo 524 à gauche, arguments
 * icône + titre + description, CTA bleu foncé. */
.marcea-reassurance {
	max-width: 80rem;
	margin: 3.75rem auto;
	padding: 4rem;
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
}

.marcea-reassurance__colonnes {
	gap: 2.5rem;
}

.marcea-reassurance__photo {
	margin: 0;
}

.marcea-reassurance__photo img {
	border-radius: 24px;
}

.marcea-reassurance h2 {
	color: var(--wp--preset--color--noir-profond);
	font-size: var(--wp--preset--font-size--heading-m);
}

.marcea-argument {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

/* !important : neutralise le centrage du layout constrained en flex. */
.marcea-argument > * {
	margin: 0 !important;
}

.marcea-argument__icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	background: var(--wp--preset--color--bleu-clair);
}

.marcea-argument__icone img {
	width: 24px;
	height: auto;
}

.marcea-argument__texte {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
	color: var(--wp--preset--color--gris-texte);
}

.marcea-argument__texte strong {
	display: block;
	color: var(--wp--preset--color--noir-profond);
}

/* Accompagnement en 4 étapes numérotées (marcea/etapes-numerotees) — composant
 * « bloc réassurance » : bande au token bleu clair, numéro bleu dans un carré
 * blanc bordé, CTA « Une solution complète ». Géométrie relevée le 2026-09-03
 * sur deux maquettes qui concordent (`1119:7758` notre-approche, `1474:8035`
 * Sage Intacct) : bande de 497px, titre à 60px du haut, pastilles 47×47 à 167px,
 * bouton à 395px, 54px sous le bouton. Le relevé d'origine avait pris la couleur
 * du pied de page (#E2E8F8 = bleu clair à 50 % sur blanc) pour celle de la bande,
 * et la pastille pour un carré de 36px. */
.marcea-etapes {
	padding-bottom: 3.375rem;
	background: var(--wp--preset--color--bleu-clair);
}

/* Gap 16px : sur les 1280px de `alignwide`, les 4 colonnes tombent alors à
 * x = 80 / 404 / 728 / 1052, le pas de 324px de la maquette. */
.marcea-etapes__grille {
	gap: 1rem;
	margin-block: 3.875rem 3.5625rem;
}

/* !important : la pastille numérotée reste calée à gauche (layout constrained).
 * Fond transparent : la maquette laisse le bleu de la bande traverser le carré.
 * `line-height: 1` est indispensable au centrage — `place-items: center` centre
 * la *boîte de ligne*, pas le glyphe, et l'interligne hérité (1,6 soit 57px pour
 * un corps de 36) depassait la pastille de 47, ce qui posait le chiffre 13px trop
 * bas. */
.marcea-etapes__numero {
	display: grid;
	place-items: center;
	width: 2.9375rem;
	height: 2.9375rem;
	margin: 0 0 0.5625rem !important;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--bleu-secondaire);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
}

/* Les textes se coupent à 260px comme dans la maquette, la colonne en faisant
 * 308 une fois le gap réduit. Les marges hautes des paragraphes sont remises à
 * zéro : sinon la marge UA (1em) fusionne avec la marge du bloc précédent et
 * l'emporte, ce qui décale la description de 17px et le bouton de 40. Maquette :
 * titre d'étape en 20px d'interligne 27, texte en 14px d'interligne 20 —
 * métriques d'encre vérifiées identiques entre la maquette et le rendu. */
.marcea-etapes__titre {
	max-width: 16.25rem;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--noir-profond);
	margin-block: 0 0.5rem;
}

.marcea-etapes__desc {
	max-width: 16.25rem;
	margin-block: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
	color: var(--wp--preset--color--gris-texte);
}

/* Cas client produit (marcea/cas-client-produit) — maquette 985:5298 : bande
 * dégradée arrondie, vidéo 524×300 à gauche, titre + texte à droite. */
.marcea-cas-client--produit {
	border-radius: 24px;
}

.marcea-cas-client--produit .marcea-cas-client__colonnes {
	gap: 3.75rem;
	align-items: center;
}

.marcea-cas-client--produit .marcea-cas-client__embed iframe {
	aspect-ratio: 524 / 300;
	border-radius: 16px;
}

.marcea-cas-client--produit h2 {
	font-size: var(--wp--preset--font-size--heading-m);
}

/* Tarifs d'une page produit (patterns marcea/tarifs-*). */
.marcea-tarifs__grille {
	gap: 1.5rem;
	max-width: 60rem;
	margin-inline: auto;
}

/* Un produit a un seul forfait : sans plafond, la carte unique s'étirerait sur
 * les 60 rem de la grille. Largeur d'une carte parmi deux, gap déduit. */
.marcea-tarifs__grille--solo {
	max-width: 29.25rem;
}

.marcea-carte-tarif {
	position: relative;
	height: 100%;
	padding: 2rem 1.5rem;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 16px;
	background: var(--wp--preset--color--blanc);
}

/* Badge « Le plus populaire » à cheval sur le bord haut, calé à gauche (maquette). */
.marcea-carte-tarif--populaire .marcea-badge--bleu {
	position: absolute;
	top: -1.125rem;
	left: 1rem;
	white-space: nowrap;
}

.marcea-carte-tarif__sous {
	color: var(--wp--preset--color--gris-texte);
}

.marcea-carte-tarif__prix {
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--bleu);
}

.marcea-carte-tarif__annuel {
	color: var(--wp--preset--color--bleu);
	font-weight: 600;
}

/* Filets séparateurs pleine largeur de carte (maquette) : au-dessus de la
 * description (sous le CTA) et sous la ligne « … inclus ». */
.marcea-carte-tarif__desc {
	border-top: 1px solid rgb(197 210 241 / 0.5);
	margin-inline: -1.5rem;
	padding: 1.5rem 1.5rem 0;
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--small);
}

.marcea-carte-tarif__inclus {
	border-bottom: 1px solid rgb(197 210 241 / 0.5);
	margin-inline: -1.5rem;
	padding: 0 1.5rem 1.5rem;
	font-weight: 600;
}

/* Responsive vitrine : empilement standard sous 1024 px (pas de maquette
 * mobile — pratiques standard, à ajuster à réception, PRD §8). */
@media (max-width: 1023.98px) {
	.marcea-hero__badge--24h {
		left: 0;
	}

	.marcea-hero__badge--facture {
		right: auto;
		left: 0;
	}

	.marcea-reassurance {
		padding: 1.5rem;
		margin-inline: 1.25rem;
	}

	.marcea-carte-benefice {
		min-height: 0;
		padding-top: 1.875rem;
	}

	.marcea-ligne-module {
		flex-wrap: wrap;
	}

	.marcea-encart {
		padding: 1.5rem;
		padding-top: 0;
		margin-inline: 1.25rem;
	}

	.marcea-encart__mascotte {
		position: static;
		text-align: center;
	}

	.marcea-cas-client__legende {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
 * Achat d'un produit (bloc marcea/achat-sage-active) — M3, étendu par ADR-034.
 * Les cartes reprennent les classes tarifs de M2 ; le choix d'un forfait ouvre
 * la popin « Complétez votre souscription » (packs, récap, ajout au panier),
 * maquette frame Figma 1127:6676. Les packs restent propres à Sage Active.
 * ------------------------------------------------------------------------- */

.marcea-tarifs__grille {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.marcea-tarifs__col {
	flex: 1 1 0;
	min-width: 0;
}

.marcea-carte-tarif__choix {
	position: relative;
	width: 100%;
	margin-block: 0.75rem;
	cursor: pointer;
}

.marcea-carte-tarif__choix input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.marcea-carte-tarif__choix:focus-within {
	outline: 2px solid var(--wp--preset--color--bleu);
	outline-offset: 2px;
}

.marcea-carte-tarif--choisie {
	box-shadow: 0 0 0 2px var(--wp--preset--color--bleu-secondaire);
}

.marcea-carte-tarif--choisie .marcea-carte-tarif__choix {
	background: var(--wp--preset--color--bleu);
}

/* Badge « Nouveau » rendu par le bloc (équivalent du mark inline de M2). */
.marcea-tarifs .marcea-checklist mark {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir-profond);
}

/* Popin « Complétez votre souscription » : colonne centrée de 385px (maquette),
 * carte blanche arrondie sur fond assombri. */
.marcea-popin {
	width: min(52.6875rem, calc(100vw - 2.5rem));
	padding: 0;
	border: 0;
	border-radius: 24px;
	box-shadow: 0 0 20px rgb(0 0 0 / 0.25);
}

.marcea-popin::backdrop {
	background: rgb(5 23 24 / 0.5);
}

.marcea-popin__contenu {
	position: relative;
	padding: 2.5rem 3rem;
}

.marcea-popin__fermer {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--noir-profond);
	cursor: pointer;
}

/* Nombre d'utilisateurs des produits facturés par utilisateur (ADR-035) : même
 * gabarit et même largeur que les cartes de pack, au-dessus d'elles. Pas de
 * maquette — dérivé du bloc .marcea-pack. */
.marcea-utilisateurs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	max-width: 24.0625rem;
	margin: 0 auto 1.75rem;
	padding: 1rem;
	border-radius: 8px;
	background: var(--wp--preset--color--beige);
}

.marcea-utilisateurs label {
	font-weight: 700;
}

.marcea-utilisateurs select {
	box-sizing: border-box;
	height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 8px;
	background: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: 0.875rem;
}

.marcea-packs {
	margin: 0;
	padding: 0;
	border: 0;
}

.marcea-packs legend {
	margin-inline: auto;
	padding: 0;
	color: var(--wp--preset--color--noir-profond);
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 800;
	text-align: center;
}

/* Popin d'un produit sans packs : ce titre remplace la légende du fieldset, qui
 * portait le nom accessible du dialog (aria-labelledby). */
.marcea-popin__titre {
	margin: 0;
	color: var(--wp--preset--color--noir-profond);
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 800;
	text-align: center;
}

.marcea-packs__intro {
	max-width: 36rem;
	margin: 0.75rem auto 0;
	color: var(--wp--preset--color--gris-texte);
	text-align: center;
}

.marcea-packs__grille {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 24.0625rem;
	margin: 1.75rem auto 0;
}

.marcea-pack {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	border-radius: 8px;
	background: var(--wp--preset--color--beige);
	cursor: pointer;
}

.marcea-pack input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	appearance: none;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 4px;
	background: var(--wp--preset--color--blanc) center / 1rem no-repeat;
}

.marcea-pack input:checked {
	border-color: var(--wp--preset--color--jaune);
	background-color: var(--wp--preset--color--jaune);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23051718' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E");
}

.marcea-pack input:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu);
	outline-offset: 2px;
}

.marcea-pack__label {
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.marcea-pack__prix {
	margin-left: auto;
	color: var(--wp--preset--color--noir-profond);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
}

.marcea-tarifs__recap {
	max-width: 24.0625rem;
	margin: 1.5rem auto 0;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 16px;
	background: var(--wp--preset--color--blanc);
}

.marcea-tarifs__recap-detail p {
	margin: 0.5rem 0;
}

.marcea-tarifs__recap-vide,
.marcea-tarifs__suite {
	color: var(--wp--preset--color--gris-texte);
}

.marcea-tarifs__recap-ligne {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* display: flex au-dessus rendrait l'attribut hidden inopérant. */
.marcea-tarifs__recap-ligne[hidden] {
	display: none;
}

.marcea-tarifs__recap-prix {
	white-space: nowrap;
}

.marcea-tarifs__total {
	color: var(--wp--preset--color--bleu);
}

.marcea-tarifs__submit {
	display: block;
	margin: 1.5rem auto 0;
}

.marcea-tarifs__submit[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.marcea-tarifs__mention {
	margin-top: 1rem;
	margin-bottom: 0;
	color: var(--wp--preset--color--gris-texte);
}

/* Icône panier du header (maquette 563-2316). */
.site-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem;
	color: var(--wp--preset--color--bleu);
}

.site-header__cart-count {
	position: absolute;
	top: -0.125rem;
	right: -0.25rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir-profond);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.125rem;
	text-align: center;
}

.site-header__cart-count--vide {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Panier / checkout classiques (shortcodes, ADR-005) : alignement charte par
 * dessus les styles WooCommerce (pas de maquette — pratiques standard).
 * ------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
	font-weight: 600;
	line-height: 1.43;
	text-decoration: none;
	cursor: pointer;
}

/* Rollover animé (charte), identique aux CTA (.marcea-btn / .wp-block-button) :
 * fond jaune, texte bleu, quelle que soit la variante WooCommerce. */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--bleu);
}

/* Variante « alt » (Valider la commande, Commander) : même charte, en
 * neutralisant le violet WooCommerce (sélecteurs plus spécifiques). */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
	background: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--bleu);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	padding: 0.875rem 1.5rem;
	background: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
	opacity: 0.5;
}

.woocommerce table.shop_table {
	border: 1px solid rgb(197 210 241 / 0.5);
	border-radius: 16px;
	border-collapse: separate;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--blanc);
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--bleu-secondaire);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--bleu-secondaire);
}

/* Panier vide (maquette 1046:6217) : icône 60px et message centrés — 125px
 * sous le header, 21px entre icône et texte, 178px avant la newsletter. Les
 * paddings retranchent les espacements globaux déjà présents : 32px de
 * padding .site-main (haut et bas) et 64px au-dessus de la newsletter. */
.marcea-panier-vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.3125rem;
	padding-block: 5.8125rem 5.125rem; /* 125-32 / 178-32-64 */
	color: var(--wp--preset--color--noir-profond);
}

/* Le wrapper de notices est rendu dans le flux flex : vide, il ne doit pas
 * créer de créneau de gap supplémentaire ; avec une notice (ex. « supprimé —
 * Annuler ? »), elle s'affiche au-dessus de l'icône. */
.marcea-panier-vide .woocommerce-notices-wrapper {
	order: -1;
}

.marcea-panier-vide .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Le message passe par wc_print_notice() : neutraliser l'habillage bandeau
 * info au profit du style titre H4-25-bold de la maquette. */
.marcea-panier-vide .wc-empty-cart-message {
	margin: 0;
}

.marcea-panier-vide .cart-empty.woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1.375rem; /* 22px */
	font-weight: 800;
	line-height: 1.875rem; /* 30px */
	text-align: center;
}

.marcea-panier-vide .cart-empty.woocommerce-info::before {
	content: none;
}

/* Aucune maquette panier n'affiche le titre de page « Panier » : masqué
 * visuellement (mêmes propriétés que .screen-reader-text), conservé dans le
 * DOM pour les lecteurs d'écran. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Panier rempli (maquette 1040:5913) : barre d'étapes sur la colonne articles,
 * une carte par ligne (« Votre choix ») et carte récapitulatif beige
 * (« Récapitulatif »). La maquette occupe 1278px de large (81px de marge à
 * 1440) : le conteneur 75rem est élargi à 80rem + le padding latéral, comme
 * les sections vitrine. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
	max-width: calc(80rem + 2.5rem);
}

/* Barres à 36px sous le header (32px de padding .site-main déjà présents) ;
 * largeur = colonne articles (récap 371px + gouttière 60px en moins). */
.marcea-panier__etapes {
	max-width: calc(100% - 431px);
	margin-block: 0.25rem 2.625rem;
}

.marcea-panier__etapes-barres {
	display: flex;
	gap: 5px;
}

.marcea-panier__etapes-barre {
	flex: 1;
	height: 6px;
	background: rgb(197 210 241 / 0.5);
}

.marcea-panier__etapes-barre:first-child {
	border-radius: 5px 0 0 5px;
}

.marcea-panier__etapes-barre:last-child {
	border-radius: 0 5px 5px 0;
}

.marcea-panier__etapes-barre--active {
	background: var(--wp--preset--color--bleu-secondaire);
}

.marcea-panier__etapes-libelles {
	display: flex;
	justify-content: space-between;
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.25rem;
}

.marcea-panier .woocommerce-cart-form,
.marcea-panier form.checkout,
.marcea-panier .marcea-confirmation__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 371px;
	column-gap: 60px;
	align-items: start;
}

.marcea-panier__titre {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.65; /* 33px */
}

.marcea-panier__lignes {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.marcea-panier__ligne {
	display: flex;
	gap: 1.6875rem; /* 27px image → texte */
	min-height: 177px;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 16px;
	background: var(--wp--preset--color--blanc);
}

.marcea-panier__ligne-image img {
	display: block;
	width: 110px;
	height: 137px;
	object-fit: cover;
}

.marcea-panier__ligne-infos {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.marcea-panier__ligne-entete {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.375rem; /* nom à 30px du haut de carte (24px de padding) */
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.75rem;
}

.marcea-panier__ligne-prix {
	white-space: nowrap;
}

.marcea-panier__ligne .variation,
.marcea-commande__articles .variation {
	margin: 0.1875rem 0 0; /* options à 3px sous la ligne du nom */
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.marcea-panier__ligne .variation dt,
.marcea-commande__articles .variation dt {
	float: left;
	margin: 0 0.25em 0 0;
	font-weight: 400;
}

.marcea-panier__ligne .variation dd,
.marcea-commande__articles .variation dd {
	margin: 0;
}

.marcea-panier__ligne .variation dd p,
.marcea-commande__articles .variation dd p {
	display: inline;
	margin: 0;
}

.marcea-panier__ligne-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: auto; /* actions calées en bas de carte */
}

.marcea-panier__qte {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding-inline: 0.5rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 8px;
	background: var(--wp--preset--color--blanc);
}

.marcea-panier__qte-btn {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--noir-profond);
	cursor: pointer;
}

.marcea-panier__qte .quantity {
	display: inline-flex;
}

.marcea-panier__qte input.qty {
	width: 2.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gris-texte);
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.25rem;
	text-align: center;
	appearance: textfield;
}

.marcea-panier__qte input.qty::-webkit-outer-spin-button,
.marcea-panier__qte input.qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

.marcea-panier__supprimer {
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.75rem;
	font-weight: 800;
	text-decoration: underline;
}

/* Bouton « Mettre à jour » : requis par le POST sans JavaScript (touche
 * Entrée dans le champ quantité) mais absent de la maquette — masqué
 * visuellement, focusable au clavier. */
.marcea-panier__maj-bouton {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Le récapitulatif suit le scroll sous le header sticky (91px sur desktop,
 * ~60px sous 1300px) — sans effet en mono-colonne (< 1024px). */
.marcea-panier__cote {
	position: sticky;
	top: calc(91px + 1.5rem);
}

@media (max-width: 1299.98px) {
	.marcea-panier__cote {
		top: calc(60px + 1.5rem);
	}
}

.marcea-panier__recap {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 16px;
	background: var(--wp--preset--color--beige);
}

.marcea-panier__promo label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.marcea-panier__promo-saisie {
	display: flex;
	gap: 0.5rem;
}

.marcea-panier__promo-saisie input.input-text {
	flex: 1;
	box-sizing: border-box;
	min-width: 0;
	height: 48px;
	padding-inline: 1.25rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 8px;
	background: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: 0.875rem;
}

.marcea-panier__promo-saisie input.input-text::placeholder {
	color: var(--wp--preset--color--gris);
}

/* Bouton « Appliquer » : absent de la maquette (arbitrage 2026-07-27) —
 * style contour charte discret. */
.marcea-panier__promo-appliquer {
	box-sizing: border-box;
	height: 48px;
	padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 8px;
	background: none;
	color: var(--wp--preset--color--bleu);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	cursor: pointer;
}

.marcea-panier__promo .coupon-error-notice {
	margin-top: 0.5rem;
	font-size: 0.75rem;
}

.marcea-panier__totaux {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--bleu-clair);
}

.marcea-panier__totaux-ligne {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
}

.marcea-panier__totaux-ligne--total {
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.75rem;
}

.marcea-panier__totaux .wc-proceed-to-checkout {
	margin: 1.5rem 0 0;
	padding: 0;
}

/* Le CSS du cœur WooCommerce impose font-size 1.25em / padding 1em /
 * margin-bottom 1em au bouton checkout : retour aux 48px charte. */
.woocommerce .marcea-panier__totaux .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	margin-bottom: 0;
	padding: 0.875rem 1.5rem;
	font-size: 0.875rem;
}

/* Étape 2 — page commande (maquette 1044:6295) : cartes « Vos coordonnées »
 * (grille de champs 3 colonnes, labels au-dessus, inputs 48px) et « Paiement »
 * à gauche, récap partagé avec le panier à droite. Le bandeau coupon natif WC
 * est masqué : le champ promo du récap soumet son formulaire via commande.js. */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none;
}

/* Les erreurs AJAX (checkout.js/upe-classic.js submit_error) sont insérées en
 * premier enfant de form.checkout — la grille : sans pleine largeur, la notice
 * prend la colonne 1 et pousse les cartes dans la colonne du récap. */
.marcea-panier form.checkout > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}

.marcea-commande__carte {
	padding: 1.875rem 2rem 2rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 16px;
	background: var(--wp--preset--color--blanc);
}

.marcea-commande__choix > .marcea-panier__titre:not(:first-child) {
	margin-top: 2rem;
}

.marcea-commande .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 1rem;
}

.marcea-commande .woocommerce-billing-fields__field-wrapper p.form-row {
	margin: 0;
}

.marcea-commande .marcea-champ--large {
	grid-column: span 2;
}

.marcea-commande .form-row label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

/* La maquette ne marque que les champs requis (*) : le suffixe
 * « (facultatif) » de WooCommerce est retiré, et l'astérisque reprend la
 * couleur du label (pas le rouge du cœur). */
.marcea-commande .form-row label .optional {
	display: none;
}

.marcea-commande .form-row label .required {
	color: inherit;
	text-decoration: none;
}

.woocommerce .marcea-commande .form-row input.input-text,
.woocommerce .marcea-commande .form-row select {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 8px;
	background: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: 0.875rem;
}

/* Padding vertical : sans effet visuel ici (hauteur fixe + border-box), mais
 * copié par le plugin Stripe (styles calculés de #billing_first_name) pour
 * dimensionner les champs de son iframe au gabarit 48px. */
.woocommerce .marcea-commande .form-row input.input-text {
	padding-block: 0.8125rem;
}

.marcea-commande .form-row input.input-text::placeholder {
	color: var(--wp--preset--color--gris);
}

/* Sélecteur de pays (select2/selectWoo du cœur) ramené au gabarit charte. */
.marcea-commande .select2-container .select2-selection--single {
	height: 48px;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 8px;
}

/* padding 0 explicite : le cœur pose un padding vertical de 7px sur le span
 * de rendu, qui décale le texte sous le centre de la boîte de 48px. */
.marcea-commande .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 1rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 0.875rem;
	line-height: 46px;
}

.marcea-commande .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

/* Cadre vert « champ valide » aussi quand la valeur est pré-sélectionnée au
 * chargement (cas du pays) : WC n'ajoute .woocommerce-validated qu'après une
 * interaction. Même vert que le cœur (--wc-green). */
.marcea-commande
	.form-row:has(select option:checked:not([value='']))
	.select2-container:not(.select2-container--open)
	.select2-selection--single {
	border-color: var(--wc-green, #007518);
}

/* Panneau déroulant du pays : select2 le rattache au body (hors
 * .marcea-commande) — scope via la classe body du checkout. */
.woocommerce-checkout .select2-container--default .select2-dropdown {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 8px;
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
}

.woocommerce-checkout .select2-container--default .select2-dropdown--below {
	margin-top: 4px;
}

.woocommerce-checkout .select2-container--default .select2-dropdown--above {
	margin-top: -4px;
}

.woocommerce-checkout .select2-search--dropdown {
	padding: 0.75rem;
}

.woocommerce-checkout .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	height: 40px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.875rem;
}

.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--wp--preset--color--bleu-secondaire);
	outline: none;
}

.woocommerce-checkout .select2-results__option {
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
}

/* Survol/navigation clavier : hover beige du thème (cf. .mega-item) ; le
 * cœur selectWoo impose un bleu #007cba via [data-selected]. */
.woocommerce-checkout
	.select2-container--default
	.select2-results__option--highlighted[data-selected] {
	background: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--noir-profond);
}

.woocommerce-checkout .select2-container--default .select2-results__option[data-selected='true'] {
	background: var(--wp--preset--color--bleu-clair);
	color: var(--wp--preset--color--noir-profond);
}

/* selectWoo donne le focus DOM aux options : l'anneau :focus-visible global
 * (offset extérieur) est rogné par l'overflow du panneau — anneau intérieur. */
.woocommerce-checkout .select2-results__option:focus-visible {
	outline-offset: -2px;
}

.marcea-commande .woocommerce-account-fields {
	margin-top: 1.5rem;
	font-size: 0.875rem;
}

.marcea-commande .woocommerce-account-fields .form-row {
	margin: 0.5rem 0 0;
}

/* Carte paiement : neutralise l'habillage gris du cœur WooCommerce. */
.marcea-commande #payment {
	border-radius: 0;
	background: none;
}

.marcea-commande #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.marcea-commande #payment ul.payment_methods li {
	font-size: 0.875rem;
}

/* Rangée méthode : label semibold, icônes de cartes calées à droite (le cœur
 * WC leur donne un margin négatif et un vertical-align approximatif). */
.marcea-commande #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--noir-profond);
}

.woocommerce .marcea-commande #payment ul.payment_methods li > label img {
	max-height: 24px;
	margin: 0 0 0 auto;
}

.marcea-commande #payment input[type='radio'] {
	accent-color: var(--wp--preset--color--bleu-secondaire);
}

/* Champs de paiement posés à plat sur la carte blanche, comme les champs
 * « Vos coordonnées » (pas de maquette pour ce bloc — alignement charte). */
.marcea-commande #payment div.payment_box {
	margin: 1rem 0 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.875rem;
}

/* Bandeau « mode test » Stripe (clés de test uniquement). */
.marcea-commande #payment .testmode-info {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	line-height: 1.25rem;
}

/* Le fieldset du formulaire Stripe garde le style navigateur par défaut
 * (bordure groove + padding) : neutralisé. */
.marcea-commande #payment .payment_box fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.marcea-commande #payment div.payment_box::before {
	content: none;
}

/* Récap : ligne produit compacte au-dessus des totaux (fragment AJAX). */
.marcea-commande__articles {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	list-style: none;
}

.marcea-commande__article-ligne {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 600;
}

.marcea-commande__article-prix {
	white-space: nowrap;
}

.marcea-commande__articles .variation {
	font-size: 0.75rem;
}

.marcea-commande__commander {
	margin: 1.5rem 0 0;
}

.marcea-commande__commander .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1rem;
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.75rem;
}

/* Case d'acceptation des CGV : même alignement que les consentements CF7,
   pour que la deuxième ligne du libellé s'aligne sur le texte, pas sur la case. */
.marcea-commande__commander .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0.75rem 0 0;
}

/* Retrait negatif plutot qu'un flex : le libelle du coeur mele un span, une
   espace et l'abbr « * », que flex separerait en trois colonnes. Selecteur
   aussi specifique que celui du coeur (.woocommerce form .form-row
   label.checkbox), qui force display: inline. */
.woocommerce form .marcea-commande__commander label.checkbox {
	display: block;
	padding-left: 1.375rem;
	text-indent: -1.375rem;
}

.marcea-commande__commander .woocommerce-form__input-checkbox {
	margin-right: 0.375rem;
}

.woocommerce .marcea-commande__commander #place_order {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Confirmation de commande (order-received) : layout du tunnel, sans maquette
 * dédiée — cartes blanches à gauche, récap de la commande sticky à droite.
 * ------------------------------------------------------------------------- */

.marcea-confirmation .woocommerce-thankyou-order-received {
	margin: 0 0 1rem;
	font-weight: 600;
}

.marcea-confirmation__apercu {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.marcea-confirmation__apercu strong {
	color: var(--wp--preset--color--noir-profond);
	font-weight: 600;
}

.marcea-confirmation__adresse {
	font-style: normal;
	line-height: 1.75;
}

@media (max-width: 1023.98px) {
	.marcea-panier__etapes {
		max-width: none;
	}

	.marcea-panier .woocommerce-cart-form,
	.marcea-panier form.checkout,
	.marcea-panier .marcea-confirmation__grille {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
	}

	.marcea-commande .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781.98px) {
	.marcea-commande .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.marcea-commande .marcea-champ--large {
		grid-column: auto;
	}
}

@media (max-width: 781.98px) {
	.marcea-tarifs__col {
		flex-basis: 100%;
	}

	.marcea-popin__contenu {
		padding: 1.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * Contact et formulaires (M4 — F4) : mise en page de la page contact et
 * habillage des champs Contact Form 7 (pas de maquette — dérivé de la charte).
 * ------------------------------------------------------------------------- */

.marcea-contact__grille {
	gap: 3rem;
}

.marcea-contact__grille .wp-block-column:first-child {
	flex: 3;
}

.marcea-contact__grille .wp-block-column:last-child {
	flex: 2;
}

.marcea-contact__coordonnees {
	padding: 2rem;
	border: 1px solid rgb(197 210 241 / 0.5);
	border-radius: 16px;
	background: var(--wp--preset--color--beige);
}

.marcea-form__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1.5rem;
}

.marcea-form p {
	margin-block: 0 1.25rem;
}

.marcea-form label {
	display: block;
	font-weight: 600;
}

.marcea-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.375rem;
	font-weight: 400;
}

.marcea-form input[type='text'],
.marcea-form input[type='email'],
.marcea-form input[type='tel'],
.marcea-form select,
.marcea-form textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--blanc);
	font: inherit;
}

.marcea-form textarea {
	min-height: 9rem;
}

.marcea-form input[type='submit'] {
	font: inherit;
	cursor: pointer;
}

/* Consentement RGPD : case + libellé sur une ligne, sans la graisse des
 * labels de champs. */
.marcea-form__consentement .wpcf7-form-control-wrap {
	margin-top: 0;
}

.marcea-form__consentement .wpcf7-list-item {
	margin-left: 0;
}

.marcea-form__consentement label {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-weight: 400;
}

.marcea-form__consentement input[type='checkbox'] {
	margin-top: 0.25rem;
}

.marcea-form .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	color: #b32d2e;
	font-size: 0.875rem;
}

.marcea-form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 0.5rem;
}

@media (max-width: 781.98px) {
	.marcea-contact__grille {
		gap: 1.5rem;
	}

	.marcea-form__grille {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Ressources (M4 — F5) : listes dynamiques (bloc marcea/liste-ressources),
 * détails d'article et de cas client. Les cinq pages de liste suivent la
 * maquette 1302:8953 (ADR-023) ; les détails restent dérivés de la charte,
 * faute de maquette dédiée.
 * ------------------------------------------------------------------------- */

/* Titre, accroche, onglets et liste vivent dans UNE section : l'écart maquette
 * entre l'accroche et les onglets (33px) ne tient pas avec deux .marcea-section
 * empilées, dont les paddings cumulés feraient 120px. */
.marcea-ressources {
	padding-block: 2.625rem 4.4375rem;
}

/* Le h1 de theme.json est en 600 ; la maquette le veut en ExtraBold. Le
 * sélecteur descendant passe devant le :root :where(h1) des styles globaux. */
.marcea-ressources h1 {
	margin: 0;
	font-weight: 800;
}

.marcea-ressources__accroche {
	max-width: 52.875rem;
	margin: 1.25rem auto 0;
	color: var(--wp--preset--color--gris-texte);
}

/* Barre d'onglets (maquette 1302:8962) : pastille pleine jaune pour l'onglet
 * actif, contour pour les autres. La bordure de l'actif reprend la couleur du
 * fond — sans elle, l'onglet perdrait 2px de haut sur ses voisins. */
.marcea-onglets-ressources {
	margin-top: 2.0625rem;
}

.marcea-onglets-ressources__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.marcea-onglets-ressources__lien {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding-inline: 1.5rem;
	border: 1px solid var(--wp--preset--color--noir-profond);
	border-radius: 8px;
	color: var(--wp--preset--color--noir-profond);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.43;
}

.marcea-onglets-ressources__lien:hover {
	background: var(--wp--preset--color--jaune);
}

.marcea-onglets-ressources__lien--actif,
.marcea-onglets-ressources__lien--actif:hover {
	border-color: var(--wp--preset--color--jaune);
	background: var(--wp--preset--color--jaune);
}

/* Ce que la barre d'onglets precede — grille, état vide ou liste de
 * documentations — démarre 50px plus bas (écart maquette onglets / 1re rangée).
 * Les styles de layout du cœur, en :where(), ne s'y opposent pas. */
.marcea-onglets-ressources + * {
	margin-top: 3.125rem;
}

/* Grille de cartes (articles, cas clients, webinaires, livres blancs, experts) :
 * 3 colonnes de 416px dans la grille wide de 1280px (maquette 1302:8953). */
.marcea-liste-ressources__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 1.875rem 2rem;
}

/* Rail de teaser enchaîné sous la grille actus (livres blancs de la home) :
 * mêmes colonnes que le rail du dessus pour que les cartes des deux s'alignent,
 * et 50px de respiration — le pas interne de la section, assez large pour que
 * les deux rails ne se lisent pas comme une seule grille de six cartes. */
.marcea-liste-ressources__grille--rail {
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 3.125rem;
}

/* État vide d'un type de ressource (S-F5-03). */
.marcea-liste-ressources__vide {
	text-align: center;
}

/* Ligne société — secteur des cartes cas client. */
.marcea-carte-actu__meta {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--bleu-secondaire);
	font-weight: 600;
}

.marcea-carte-actu__meta + h3 {
	margin-top: 0;
}

/* Témoignages en grille (pages vitrine — ex. Qui sommes-nous). */
.marcea-temoignages__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 1rem;
}

/* Grille équipe (maquette 1173:6866) : 4 colonnes de 308px dans la grille wide
 * de 1280px, gouttières 16px en colonne et 32px en rang. */
.marcea-liste-ressources__grille--experts {
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem 1rem;
}

/* Cartes membres à deux états (maquette 1181:7143) : 308x479, photo carrée en
 * haut, identité + flèche par défaut, photo de survol + présentation au
 * survol. Le fond coloré est piloté par le champ « Couleur de fond ». */
.marcea-carte-expert {
	--marcea-membre-fond: var(--wp--preset--color--bleu-clair);

	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
	overflow: hidden;
}

.marcea-carte-expert--jaune-clair {
	--marcea-membre-fond: var(--wp--preset--color--jaune-clair);
}

.marcea-carte-expert--bleu-clair {
	--marcea-membre-fond: var(--wp--preset--color--bleu-clair);
}

.marcea-carte-expert--bleu-petard {
	--marcea-membre-fond: var(--wp--preset--color--bleu-petard);
}

.marcea-carte-expert--bleu-secondaire {
	--marcea-membre-fond: var(--wp--preset--color--bleu-secondaire);
}

/* « Vert d'eau » de la charte Figma et sa déclinaison foncée : locaux à la
 * carte, ils ne sont pas ajoutés à la palette globale du thème. */
.marcea-carte-expert--vert-eau {
	--marcea-membre-fond: #92d3cc;
}

.marcea-carte-expert--vert-eau-fonce {
	--marcea-membre-fond: #02837f;
}

.marcea-carte-expert__photos {
	position: relative;
	aspect-ratio: 1;
	background: var(--marcea-membre-fond);
}

/* Les deux états sont superposés. Les photos sont détourées : la photo de
 * survol porte donc son propre aplat, sans quoi la photo par défaut resterait
 * visible à travers son fond transparent. */
.marcea-carte-expert__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.marcea-carte-expert__photo--survol {
	background: var(--marcea-membre-fond);
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Drapeau à fleur des bords bas et droit de la photo (40x26 pour 308px). */
.marcea-carte-expert__drapeau {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12.99%;
	height: auto;
}

/* 171px sous la photo carrée = les 479px de hauteur de carte de la maquette ;
 * texte à 16px sous la photo et à 24px des bords. */
.marcea-carte-expert__texte {
	position: relative;
	flex: 1;
	min-height: 10.6875rem;
	padding: 1rem 1.5rem 1.5rem;
}

.marcea-carte-expert__identite {
	transition: opacity 0.2s ease;
}

.marcea-carte-expert__nom {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
}

.marcea-carte-expert__pole,
.marcea-carte-expert__precision {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4286;
}

/* Présentation superposée à l'identité : les 260px de large de la maquette
 * sont exactement la largeur utile de la carte (308 moins 2×24). */
.marcea-carte-expert__bio {
	position: absolute;
	inset: 1rem 1.5rem auto;
	margin: 0;
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4286;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
}

.marcea-carte-expert__bascule {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.marcea-carte-expert:hover .marcea-carte-expert__photo--survol,
.marcea-carte-expert:focus-within .marcea-carte-expert__photo--survol,
.marcea-carte-expert.is-ouverte .marcea-carte-expert__photo--survol {
	opacity: 1;
}

/* L'identité s'efface pour laisser la place à la bio. Une fiche qui n'en a pas
 * la garde : sinon son survol ne montrerait qu'un bloc de texte vide. */
.marcea-carte-expert:not(.marcea-carte-expert--sans-bio):hover .marcea-carte-expert__identite,
.marcea-carte-expert:not(.marcea-carte-expert--sans-bio):focus-within
	.marcea-carte-expert__identite,
.marcea-carte-expert:not(.marcea-carte-expert--sans-bio).is-ouverte .marcea-carte-expert__identite {
	opacity: 0;
}

.marcea-carte-expert:hover .marcea-carte-expert__bio,
.marcea-carte-expert:focus-within .marcea-carte-expert__bio,
.marcea-carte-expert.is-ouverte .marcea-carte-expert__bio {
	opacity: 1;
	visibility: visible;
}

/* La flèche s'efface au survol souris (maquette) mais reste visible dès que la
 * carte est pilotée au clavier ou au doigt : sinon l'indicateur de focus et le
 * moyen de refermer disparaissent. */
.marcea-carte-expert:hover .marcea-carte-expert__bascule {
	opacity: 0;
}

.marcea-carte-expert:focus-within .marcea-carte-expert__bascule,
.marcea-carte-expert.is-ouverte .marcea-carte-expert__bascule {
	opacity: 1;
}

@media (max-width: 1023.98px) {
	.marcea-liste-ressources__grille--experts {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781.98px) {
	.marcea-liste-ressources__grille--experts,
	.marcea-liste-ressources__grille--rail {
		grid-template-columns: 1fr;
	}
}

/* FAQ dynamique : colonne de lecture maquette, intertitres de catégorie. */
.marcea-liste-ressources--faq {
	max-width: 53.125rem;
}

.marcea-faq__categorie {
	margin: 2.5rem 0 0.5rem;
}

/* Pagination des listes de ressources (maquette 1306:5788) : pastille pleine
 * pour la page courante, texte nu pour les autres. */
.marcea-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 4.6875rem;
	font-size: var(--wp--preset--font-size--small);
}

.marcea-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.125rem;
	height: 2.25rem;
	padding-inline: 0.5rem;
	border-radius: 8px;
	color: var(--wp--preset--color--noir-profond);
	text-decoration: none;
}

.marcea-pagination .page-numbers.current {
	background: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
}

.marcea-pagination .page-numbers.dots {
	color: var(--wp--preset--color--gris-texte);
}

.marcea-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--jaune);
}

/* Détail d'article et de cas client (single.php, single-marcea_case_study.php) :
 * hero de page puis colonne de lecture centrée. */
.marcea-hero--detail h1 {
	max-width: 66.5rem;
	margin: 0 auto;
}

.marcea-article__date {
	margin: 0.75rem 0 0;
	color: rgb(255 255 255 / 0.8);
}

.marcea-article {
	max-width: 53.125rem;
	margin-inline: auto;
}

.marcea-article__image {
	margin: 0 0 2rem;
}

.marcea-article__image img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.marcea-article__retour {
	margin-top: 2.5rem;
}

.marcea-article__retour a {
	color: var(--wp--preset--color--bleu-secondaire);
	font-weight: 800;
	text-decoration: none;
}

.marcea-fiche-cas__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.marcea-fiche-cas__resultats {
	margin-top: 2rem;
	padding: 1.5rem;
	border-radius: 16px;
	background: var(--wp--preset--color--beige);
}

.marcea-fiche-cas__resultats h2 {
	margin-top: 0;
}

/* Fiche livre blanc (F6) — maquette 1310:9010 : hero dégradé à deux colonnes,
 * puis page blanche centrée sur le formulaire gate. Le panneau reprend
 * l'habillage des pages de demande (.marcea-form--panneau, ADR-014), posé sur
 * du beige : l'inverse de « Facture électronique », qui embarque le même
 * formulaire dans un panneau blanc sur bande beige.
 *
 * Rythme vertical maquette : dégradé de 439px avec 70px de part et d'autre du
 * contenu, 50px avant le titre d'invite, 44px avant le panneau, 121px avant le
 * footer. Le corps de la fiche et le lien de retour sont hors maquette
 * (arbitrage 2026-08-04) et reprennent le pas de 50px. */
.marcea-livre-blanc__hero {
	padding-block: 4.375rem;
	border-radius: 0 0 32px 32px;
}

/* Colonnes 608 + 148 + 524 dans la gouttière alignwide (1280px) : la couverture
 * garde sa largeur, la colonne texte absorbe le reste. Sous ~1130px les deux
 * passent à la ligne — la gouttière de 148px ne vaut alors plus que pour
 * l'horizontale, l'interligne reprend le pas de 40px. */
.marcea-livre-blanc__hero-grille {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2.5rem 9.25rem;
	max-width: 80rem;
	margin-inline: auto;
}

.marcea-livre-blanc__hero-texte {
	flex: 1 1 26rem;
}

/* H1 35/45 : le thème passe les h1 en 600, la maquette les veut en ExtraBold
 * comme les autres titres. 16px avant l'accroche, 16px avant la date. */
.marcea-livre-blanc__hero-texte h1 {
	margin-block: 0 1rem;
	font-weight: 800;
}

/* Accroche 16/24 bornée à 545px : la maquette la laisse plus étroite que la
 * colonne de 608px. */
.marcea-livre-blanc__accroche {
	max-width: 34.0625rem;
	margin-block: 0;
	line-height: 1.5;
}

.marcea-livre-blanc__hero .marcea-article__date {
	margin-top: 1rem;
}

/* Couverture 524x299 : hauteur en dur (aucun décalage au chargement) et
 * recadrage centré, les visuels des fiches n'ayant pas tous ce rapport. */
.marcea-livre-blanc__couverture {
	flex: 0 1 32.75rem;
	margin: 0;
}

.marcea-livre-blanc__couverture img {
	display: block;
	width: 100%;
	height: 18.6875rem;
	border-radius: 16px;
	object-fit: cover;
}

.marcea-livre-blanc {
	padding-block: 3.125rem 7.5625rem;
}

/* Corps de la fiche : colonne de lecture des articles, à 50px du titre
 * d'invite — le pas que la maquette pose entre le hero et ce titre. La marge
 * haute du premier bloc traverserait le conteneur (fusion des marges) et
 * ajouterait 16px sous le dégradé. */
.marcea-livre-blanc__corps {
	max-width: 53.125rem;
	margin: 0 auto 3.125rem;
}

.marcea-livre-blanc__corps > :first-child {
	margin-top: 0;
}

/* Titre d'invite 30/40 centré sur 846px, 44px avant le panneau. */
.marcea-livre-blanc__invite {
	max-width: 52.875rem;
	margin: 0 auto 2.75rem;
	line-height: 1.3333;
	text-align: center;
}

.marcea-livre-blanc__panneau {
	max-width: 34.75rem;
	margin-inline: auto;
	padding: 2rem;
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
}

/* Bouton révélé après soumission (livre-blanc-gate.js) : le paragraphe est dans
 * le panneau, dont la règle générique (.marcea-form--panneau p) l'emporterait
 * sur une marge haute portée par la seule classe. */
.marcea-form--panneau .marcea-livre-blanc__telechargement {
	margin-block: 1.5rem 0;
}

.marcea-livre-blanc__telechargement a {
	display: inline-block;
}

/* Repli sans PDF et lien de retour : centrés comme le reste de la page. La
 * marge basse du paragraphe s'ajouterait au padding de section. */
.marcea-livre-blanc__indisponible,
.marcea-livre-blanc .marcea-article__retour {
	margin-bottom: 0;
	text-align: center;
}

@media (max-width: 781.98px) {
	/* Le blanc de bas de page (121px maquette) se resserre sur mobile. */
	.marcea-livre-blanc {
		padding-block: 2.5rem 4rem;
	}
}

/* Détail d'article (F5, single.php) — maquette 1306:9113 : même géométrie de
 * hero à deux colonnes que la fiche livre blanc (608 + 524 dans une gouttière
 * de 148px sur un conteneur de 1280px, cover 299px de haut), mais avec des
 * classes propres pour ne pas coupler les deux templates. Corps et lien de
 * retour hors maquette (elle ne montre qu'un exemple Lorem) : même arbitrage
 * que le livre blanc, rythme de 50px repris. */
.marcea-article__hero {
	padding-block: 4.375rem;
	border-radius: 0 0 32px 32px;
}

.marcea-article__hero-grille {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2.5rem 9.25rem;
	max-width: 80rem;
	margin-inline: auto;
}

.marcea-article__hero-texte {
	flex: 1 1 26rem;
}

.marcea-article__hero-texte h1 {
	margin-block: 0 1rem;
	font-weight: 800;
}

/* Accroche 16/1.6 (token Figma Text-16-reg) bornée à 545px. */
.marcea-article__accroche {
	max-width: 34.0625rem;
	margin-block: 0;
	line-height: 1.6;
}

.marcea-article__hero .marcea-article__date {
	margin-top: 1rem;
}

.marcea-article__couverture {
	flex: 0 1 32.75rem;
	margin: 0;
}

.marcea-article__couverture img {
	display: block;
	width: 100%;
	height: 18.6875rem;
	border-radius: 16px;
	object-fit: cover;
}

/* Corps : 50px sous le hero, 121px avant le footer (arbitrage repris du
 * livre blanc). Texte gris comme la maquette (par défaut le thème met le
 * corps en noir-profond). */
.marcea-article--post {
	padding-block: 3.125rem 7.5625rem;
}

.marcea-article--post .entry-content {
	color: var(--wp--preset--color--gris-texte);
}

.marcea-article--post .entry-content > :first-child {
	margin-top: 0;
}

/* Rythme des blocs de contenu (titres 18px sous eux, 50px avant un titre ou
 * une image) : ne se voit pas encore sur l'article de démo (pas de titre ni
 * d'image dans son corps) mais vaut pour les articles qui en contiendront. */
.marcea-article--post .entry-content h2,
.marcea-article--post .entry-content h3 {
	margin-top: 3.125rem;
}

.marcea-article--post .entry-content figure,
.marcea-article--post .entry-content .wp-block-image {
	margin-block: 3.125rem;
}

.marcea-article--post .entry-content img {
	border-radius: 16px;
}

.marcea-article__partage {
	margin-top: 3.125rem;
}

.marcea-article__partage-titre {
	margin: 0 0 0.5625rem;
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
}

.marcea-article__partage-liens {
	display: flex;
	gap: 0.75rem;
	margin: 0;
}

.marcea-article__partage-liens a {
	display: flex;
	color: var(--wp--preset--color--bleu-secondaire);
}

.marcea-article--post .marcea-article__retour {
	margin-top: 3.125rem;
}

@media (max-width: 781.98px) {
	.marcea-article__hero {
		padding-block: 2.5rem;
	}

	.marcea-article--post {
		padding-block: 2rem 3rem;
	}
}

/* ---------------------------------------------------------------------------
 * Page « Qui sommes-nous » (maquette 1046:6470) : hero entreprise, bandeau
 * chiffres clés, intro, carrousel « différences », sections duo (présence /
 * engagements), certification, variante communauté du bandeau question.
 * ------------------------------------------------------------------------- */

/* Hero (node 1046:6471). Espacements maquette : photo à 68px sous le header,
 * 71px sous la photo, texte décalé de 18px (H1 à 86px), accroche 16px/1.6. */
.marcea-hero--entreprise {
	padding-block: 4.25rem 4.4375rem;
}

.marcea-hero--entreprise .marcea-hero__texte {
	padding-top: 1.125rem;
}

.marcea-hero--entreprise .marcea-hero__accroche {
	line-height: 1.6;
}

/* Bandeau chiffres clés (node 1117:7324, bande de 221px). Espacements
 * maquette : 54px de padding vertical, libellé à 2px sous la valeur (50px,
 * interligne 52px), filets bleu clair entre les 4 colonnes (gap 0). */
.marcea-chiffres {
	padding-block: 3.375rem;
}

/* Marges UA des colonnes neutralisées (comme le hero) : l'espace vertical est
 * porté par les paddings de section. Le thème n'active pas blockGap
 * (ADR-007) : les gaps maquette sont portés ici, pas par les attributs. */
.marcea-chiffres .wp-block-columns,
.marcea-duo {
	margin-block: 0;
}

.marcea-chiffres .wp-block-columns {
	gap: 0;
}

.marcea-duo {
	gap: 3.75rem;
}

.marcea-chiffres .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--preset--color--bleu-clair);
}

.marcea-chiffres__valeur {
	margin: 0;
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 800;
	line-height: 1.04;
}

/* « 1er » : exposant à 32.25px pour une valeur de 50px (maquette). */
.marcea-chiffres__valeur sup {
	font-size: 0.645em;
	line-height: 1;
}

.marcea-chiffres__libelle {
	margin: 0.125rem auto 0;
	max-width: 14.375rem; /* deux lignes max (maquette : 215px) */
	color: var(--wp--preset--color--bleu);
}

/* Intro (node 1046:6490, colonne de 1064px). Espacements maquette : 101px
 * au-dessus du titre, 102px sous le texte, 16px entre les deux. */
.marcea-intro {
	padding-block: 6.3125rem 6.375rem;
}

.marcea-intro h2 {
	margin-bottom: 1rem;
}

.marcea-intro p {
	margin-block: 0;
}

/* Variante « portrait » de « Qui sommes-nous » (node 1046:6490 + visuel
 * 1672:10000) : l'intro n'y est plus centrée mais posée à droite d'une photo
 * de 524px, dans une rangée de 1152px alignée à gauche — d'où deux colonnes de
 * 32.75rem qui laissent 44px libres à droite. La règle .marcea-intro reste
 * celle de « Un service complet », qui garde son texte centré sur 1064px.
 * Espacements maquette : photo à 81px du bandeau chiffres, 89px avant la bande
 * beige. Le titre y descend à 30px : sans son interligne de 1.33 (celui du h3
 * du thème, 40px de ligne), le h2 garderait le 1.29 de sa balise et les deux
 * lignes perdraient 3px. */
.marcea-intro--portrait {
	padding-block: 5.0625rem 5.5625rem;
}

.marcea-intro--portrait h2 {
	line-height: 1.33;
}

/* « Ce qui fait la différence » (nodes 1051:6981/7091) : réutilise le
 * carrousel des témoignages (cartes 524px, flèches JS). Espacements maquette :
 * titre à 55px du haut, 51px avant les cartes, 24px avant les flèches (23px
 * conservés du carrousel), 32px en bas. */
.marcea-differences {
	padding-block: 3.4375rem 2rem;
}

.marcea-differences > h2 {
	margin-bottom: 3.1875rem;
}

/* Carte différence (node 1051:6987). Rythme maquette : icône 60px à 24px du
 * haut, titre à 23px de l'icône, texte 14px/20px à 16px du titre, 26px de
 * padding latéral, 30px en bas, passages accentués en semi-gras. */
.marcea-carte-temoignage--difference {
	padding: 1.5rem 1.625rem 1.875rem;
	text-align: center;
}

.marcea-carte-temoignage--difference .marcea-carte-temoignage__icone {
	width: 60px;
	margin: 0 auto;
}

.marcea-carte-temoignage--difference h3 {
	margin: 1.4375rem 0 0;
	font-weight: 700;
	line-height: 1.5;
}

.marcea-carte-temoignage--difference p {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--gris-texte);
	line-height: 1.43;
}

.marcea-carte-temoignage--difference p strong {
	font-weight: 600;
}

/* « Vos enjeux » (nodes 1358:10025 comptabilité & finance / 1359:10312
 * commerce) : réutilise le carrousel des témoignages (cartes 524px, flèches
 * JS). Espacements maquette : titre à 55px du haut, 16px avant le chapô,
 * 43px avant les cartes, 32px en bas. */
.marcea-enjeux {
	padding-block: 3.4375rem 2rem;
}

.marcea-enjeux > h2 {
	margin-bottom: 1rem;
}

.marcea-enjeux > p {
	margin-block: 0 2.6875rem;
}

/* Carte enjeu (icône + titre + paragraphe, sans citation ni note) : même
 * rythme que .marcea-carte-temoignage--difference. */
.marcea-carte-temoignage--enjeu {
	padding: 1.5rem 1.625rem 1.875rem;
	text-align: center;
}

/* Boite fixe de 60x60 comme les instances d'icone de la maquette. Les SVG sont
 * exportes recadres sur leur encre (de 40x51 a 60x60) : avec la seule largeur,
 * chaque icone imposait sa propre hauteur et desalignait les titres d'une carte
 * a l'autre. L'icone garde sa taille naturelle, centree dans la boite. */
.marcea-carte-temoignage--enjeu .marcea-carte-temoignage__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: 0 auto;
}

.marcea-carte-temoignage--enjeu h3 {
	margin: 1.4375rem 0 0;
	/* Text-18-bold de la maquette : sans cette taille le titre heritait de
	 * `heading-m` (30px) et ecrasait le paragraphe de la carte. La carte
	 * `--difference` garde la sienne, sa maquette est differente. */
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
}

.marcea-carte-temoignage--enjeu p {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--gris-texte);
	line-height: 1.43;
}

/* Sections duo (nodes 1119:7452 présence / 1119:7505 engagements) : carte
 * 524px + colonne texte, gap 60px, rangée de 1152px. Espacements maquette :
 * 96px avant la présence, 101px avant les engagements, 30px avant le bouton.
 * Les 101px se mesurent sous le bas *visible* de la carte présence (y=2871),
 * pas sous le bas de sa frame Figma (y=2901) : la frame traîne 28px de vide
 * sous la carte, et c'est ce qui avait fait poser 71px ici. */
.marcea-presence {
	padding-block: 6rem 0;
}

.marcea-engagements {
	padding-block: 6.3125rem 0;
}

.marcea-duo__carte {
	margin-block: 0;
}

.marcea-duo__carte img {
	width: 100%;
	height: auto;
	border-radius: 24px;
}

.marcea-duo__contenu h3 {
	margin: 0 0 1rem;
}

.marcea-duo__contenu p {
	margin-block: 0;
}

.marcea-duo__contenu .wp-block-buttons {
	margin-top: 1.875rem;
}

/* Interligne 28px (maquette) et ligne vide entre l'intertitre gras et le
 * texte des engagements. */
.marcea-engagements .marcea-duo__contenu p {
	line-height: 1.75;
}

.marcea-engagements .marcea-duo__contenu p + p {
	margin-top: 1.75rem;
}

/* Engagement sport féminin (node 1657:9685) : troisième bloc duo de la page,
 * mais son visuel est un logo posé sur le fond blanc, pas une photo en carte —
 * le `Rectangle 9` du gabarit y est blanc. Colonnes alignées en haut : la
 * maquette pose le cadre du logo au ras du titre, et c'est le détourage du
 * logo qui laisse 62px avant son encre. Espacements maquette : 139px sous la
 * photo des engagements, encre du logo 280×355, interligne du corps à 26px
 * (défaut du thème) et non les 28px du bloc engagements, ligne vide entre
 * l'intertitre et le corps. Le bas de la section est donné par la colonne
 * texte (512px contre 417px au logo) ; les 155px qui suivent sont portés par
 * .marcea-certification. */
.marcea-sport-feminin {
	padding-block: 8.6875rem 0;
}

.marcea-sport-feminin__logo {
	max-width: 280px;
	margin: 3.875rem auto 0;
}

.marcea-sport-feminin__logo img {
	width: 100%;
	height: auto;
}

.marcea-sport-feminin .marcea-duo__contenu p + p {
	margin-top: 1.625rem;
}

/* Certification (nodes 1117:7387/7389, badge 275×69). Espacements maquette :
 * 155px au-dessus du titre, 31px avant le badge, 82px avant le bandeau. Le
 * badge y a été ramené de 409px à 275px de large et le titre de 35px à 30px —
 * d'où l'interligne de 1.33 (40px de ligne, comme le h3 du thème), que la
 * balise h2 ne donne pas. */
.marcea-certification {
	padding-block: 9.6875rem 5.125rem;
}

.marcea-certification h2 {
	margin-bottom: 1.9375rem;
	line-height: 1.33;
}

.marcea-certification__logo {
	max-width: 275px;
	margin: 0 auto;
}

.marcea-certification__logo img {
	width: 100%;
	height: auto;
}

/* Variante « communauté » du bandeau question (node 1117:7401) : soulignement
 * sous « communauté Marcea » (225px, centre décalé de 25px à droite). */
.marcea-question--communaute .marcea-titre-souligne {
	background-position: bottom left calc(50% + 25px);
	background-size: 225px 15px;
}

/* Sous 782px les colonnes core s'empilent : filets des chiffres passés à
 * l'horizontale, et le décalage du logo sport n'a plus de titre à côté de quoi
 * se caler — il s'ajouterait au padding de section. */
@media (max-width: 781.98px) {
	.marcea-chiffres .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--bleu-clair);
		padding-top: 1.25rem;
	}

	.marcea-sport-feminin__logo {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Page « Notre approche » (maquette 1119:7758) : constat (titre souligné +
 * cartes problèmes), variante « approche » des cartes domaines, blocs solution
 * adaptée et interlocuteur. Hero, duo et bandeau partagés avec qui-sommes-nous,
 * bande des 4 étapes partagée avec les pages produit.
 * ------------------------------------------------------------------------- */

/* Constat (nodes 1119:7779/7780 + cartes 1119:8082). Espacements maquette :
 * 100px au-dessus du titre, 52px avant le paragraphe, 31px avant les cartes,
 * 123px sous les cartes. Soulignement 389×15 sous « problème
 * d'accompagnement » (2e ligne, centre décalé de +213px). */
.marcea-constat {
	padding-block: 6.25rem 7.6875rem;
}

.marcea-constat .marcea-titre-souligne {
	margin-bottom: 3.25rem;
	background-position: bottom left calc(50% + 213px);
	background-size: 389px 15px;
	padding-bottom: 1.125rem;
}

.marcea-constat p {
	margin-block: 0;
}

.marcea-constat__cartes {
	margin-block: 1.9375rem 0;
	gap: 1rem;
}

/* Carte problème (node 1119:8082, 344×303) : icône 28px à 49px du haut,
 * titre 20px semibold interligne 33px à 20px de l'icône, texte gris à 8px. */
.marcea-carte-probleme {
	height: 100%;
	min-height: 18.9375rem;
	padding: 3.0625rem 1.5rem 2.4375rem;
	border: 2px solid rgb(197 210 241 / 0.3);
	border-radius: 24px;
	background: var(--wp--preset--color--blanc);
}

.marcea-carte-probleme__icone {
	width: 28px;
	margin: 0;
}

.marcea-carte-probleme h3 {
	margin-block: 1.25rem 0;
	font-weight: 600;
	line-height: 1.65;
}

.marcea-carte-probleme p {
	margin-block: 0.5rem 0;
	color: var(--wp--preset--color--gris-texte);
}

/* Variante « approche » des cartes domaines (nodes 1121:6587/6592) : section
 * plate (pas de recouvrement home), titre sans soulignement + accroche.
 * Espacements maquette : 91px au-dessus du titre, 16px avant l'accroche,
 * 51px avant les cartes, 105px en bas. */
.marcea-cartes-solutions--approche {
	margin-top: 0;
	padding-top: 5.6875rem;
	padding-bottom: 6.5625rem;
}

.marcea-cartes-solutions--approche > h2 {
	margin-block: 0 1rem;
}

.marcea-cartes-solutions__accroche {
	margin-block: 0 3.1875rem;
	color: rgb(255 255 255 / 0.9);
}

/* Bloc « Une solution adaptée » (node 1121:6624) : duo carte de France +
 * texte à liens produits. Espacements maquette : 99px au-dessus (150px avant
 * la certification portés par .marcea-certification), blocs de texte espacés
 * de 26px, liens produits soulignés gris. */
.marcea-solution-adaptee {
	padding-block: 6.1875rem 0;
}

.marcea-solution-adaptee .marcea-duo__contenu p + p {
	margin-top: 1.625rem;
}

.marcea-solution-adaptee .marcea-duo__contenu p a {
	color: var(--wp--preset--color--gris-texte);
	text-decoration: underline;
}

/* Bloc « Un interlocuteur qui connaît votre dossier » (nodes 1173:6695/6698) :
 * duo texte à gauche / photo à droite, mêmes gabarits que le bloc solution
 * adaptée. Espacements maquette : 142px sous le bloc Sage, 136px avant la
 * bande des étapes, interligne 28px, blocs de texte séparés d'une ligne vide. */
.marcea-interlocuteur {
	padding-block: 8.875rem 8.5rem;
}

.marcea-interlocuteur .marcea-duo__contenu p,
.marcea-interlocuteur .marcea-duo__contenu li {
	line-height: 1.75;
}

.marcea-interlocuteur .marcea-duo__contenu p + p {
	margin-top: 1.75rem;
}

/* Puces carrées de la maquette, texte à 26px du bord du bloc. */
.marcea-interlocuteur__puces {
	margin-block: 1.75rem;
	padding-left: 1.625rem;
	list-style: square;
}

/* ---------------------------------------------------------------------------
 * Page « Une équipe à vos côtés » (maquette 1173:6866) : hero La Team Marcea,
 * grille des 14 cartes membres (styles avec .marcea-carte-expert), bloc
 * présence internationale sans CTA. Le bandeau communauté et le duo carte de
 * France reprennent les briques de « Qui sommes-nous ».
 * ------------------------------------------------------------------------- */

/* Hero (node 1173:6867) : même cadre que les autres pages entreprise (68px au
 * dessus de la photo, 71px en dessous), mais le bloc texte descend à 173px du
 * haut du dégradé au lieu de 86px. */
.marcea-hero--equipe .marcea-hero__texte {
	padding-top: 6.5625rem;
}

/* Grille équipe : 78px sous le hero, 112px avant le bloc présence (portés par
 * .marcea-presence--equipe). */
.marcea-equipe {
	padding-block: 4.875rem 0;
}

/* Variante du bloc présence : 112px au-dessus de la carte, 140px avant le
 * bandeau communauté. Sans le CTA de la maquette (lien auto-référent retiré),
 * la colonne texte se recentre sur la carte. */
.marcea-presence--equipe {
	padding-block: 7rem 8.75rem;
}

/* ---------------------------------------------------------------------------
 * Page « Nous rejoindre » (maquette 1212:9029, frame 1440x1760) : page blanche
 * sans hero dégradé — H1 centré, colonne d'accroche + photo d'équipe, panneau
 * beige portant le formulaire de candidature (Contact Form 7).
 *
 * Rythme vertical maquette : 42px sous le header, 78px sous le H1, panneau de
 * 256 à 951 puis 191px avant le footer. La grille est calée à gauche sur la
 * gouttière alignwide (x=81) et s'arrête à x=1252 : la maquette laisse
 * volontairement du blanc à droite.
 * ------------------------------------------------------------------------- */

.marcea-rejoindre {
	padding-block: 2.625rem 11.9375rem;
}

/* H1 35/45 : le thème passe les h1 en 600, la maquette les veut en ExtraBold
 * comme les autres titres. */
.marcea-rejoindre > h1 {
	margin-block: 0 4.875rem; /* 78px entre le bas du H1 et les colonnes */
	font-weight: 800;
}

/* Colonnes 525 (photos) + 90 + 556 (panneau) : les largeurs sont portées par
 * les attributs de bloc (flex-basis en ligne), la mise en page core l'emportant
 * sur la feuille du thème. Marges UA neutralisées : le thème n'active pas
 * blockGap (ADR-007), l'espacement est porté ici. */
.marcea-rejoindre__grille {
	margin-block: 0;
	gap: 5.625rem;
}

/* Accroche : H2 22/30, texte 18/32 en paragraphes jointifs (maquette). */
.marcea-rejoindre__accroche h2 {
	margin-block: 0 1rem;
	line-height: 1.364;
}

.marcea-rejoindre__accroche p {
	margin-block: 0;
	line-height: 1.778;
}

/* Photo d'équipe 520x280 r16, 49px sous le texte (maquette). Le fichier est en
 * 1040x560, soit 2x le cadre : le object-fit: cover est neutre à cette largeur
 * et ne recadre que lorsque la colonne se resserre sous 520px. */
.marcea-rejoindre__photo {
	margin: 3.0625rem 0 0;
}

.marcea-rejoindre__photo img {
	display: block;
	max-width: 100%;
	border-radius: 16px;
}

/* Panneau du formulaire : beige, rayon 24, padding 32 (largeur utile 492). */
.marcea-rejoindre__formulaire {
	padding: 2rem;
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
}

/* --- Formulaire en panneau (candidature, démo, expert, diagnostic) --------
 *
 * Habillage commun des formulaires posés dans un panneau beige : les maquettes
 * 1212:9029 (candidature), 1209:8047 (démo), 1212:8539 (expert) et 1212:8838
 * (diagnostic) dessinent exactement les mêmes champs. Ce qui est propre à la
 * candidature (légende et champs fichier) vit plus bas, sur ses propres
 * classes.
 * ------------------------------------------------------------------------- */

/* Tout le formulaire est en 14/20 dans la maquette (labels compris). */
.marcea-form--panneau {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

/* Gouttière 16px entre les deux colonnes de champs, 24px entre les rangées
 * (portés par la marge basse des .marcea-form__champ). */
.marcea-form--panneau .marcea-form__grille {
	column-gap: 1rem;
}

.marcea-form--panneau p {
	margin-block: 0 1.5rem;
}

.marcea-form--panneau label {
	font-weight: 400;
}

.marcea-form--panneau .wpcf7-form-control-wrap {
	margin-top: 0.5rem;
}

/* Champs de 48px : 13 + 20 (14/1.43) + 13 + 2px de bordure. */
.marcea-form--panneau input[type='text'],
.marcea-form--panneau input[type='email'],
.marcea-form--panneau input[type='tel'],
.marcea-form--panneau textarea {
	padding: 0.8125rem 0.9375rem;
	border-color: var(--wp--preset--color--bleu-clair);
	line-height: 1.43;
}

.marcea-form--panneau input::placeholder,
.marcea-form--panneau textarea::placeholder {
	color: var(--wp--preset--color--gris);
}

.marcea-form--panneau input:focus,
.marcea-form--panneau textarea:focus {
	border-color: var(--wp--preset--color--bleu-secondaire);
}

/* 100px maquette : hauteur explicite, l'attribut rows de CF7 primerait sur une
 * simple min-height. En display: block, pas de demi-interligne sous la ligne
 * de base qui gonflerait le conteneur CF7. */
.marcea-form--panneau textarea {
	display: block;
	height: 6.25rem;
	min-height: 6.25rem;
	resize: vertical;
}

/* --- Champs fichier : propres à la candidature (ADR-013) ----------------- */

/* Légende commune aux deux champs fichier : même graisse que les labels, mais
 * ce n'est pas un <label> (elle porte sur deux champs). */
.marcea-form__legende {
	display: block;
	margin-bottom: 0.5rem;
}

.marcea-form__champ--fichiers {
	margin-bottom: 1.4375rem; /* 23px avant « Votre message » (maquette) */
}

/* Sibling général : chaque champ est précédé de son label lecteur d'écran. */
.marcea-fichier ~ .marcea-fichier {
	margin-top: 1rem;
}

/* Habillage de repli (sans JS) : le champ natif garde sa mécanique, seul le
 * bouton du navigateur est mis à la charte. */
.marcea-fichier {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.marcea-fichier input[type='file'] {
	flex: 1;
	padding: 0.625rem 0.9375rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--blanc);
	font: inherit;
}

.marcea-fichier input[type='file']::file-selector-button {
	margin-right: 1rem;
	padding: 0.375rem 0.75rem;
	border: 0;
	border-radius: 0.375rem;
	background: var(--wp--preset--color--bleu-clair);
	color: var(--wp--preset--color--noir-profond);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Version habillée (candidature.js) : l'input couvre le champ dessiné en
 * opacity 0 — clic, focus clavier et lecteur d'écran restent natifs. La
 * colonne de la corbeille fait 45px, le champ occupe les 447px restants. */
.marcea-fichier--js input[type='file'] {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 2.8125rem);
	height: 3rem;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.marcea-fichier--js .wpcf7-form-control-wrap {
	position: static;
	order: 3;
	flex: 0 0 100%;
	margin-top: 0;
}

.marcea-fichier__champ {
	display: flex;
	flex: 1;
	align-items: center;
	overflow: hidden;
	height: 3rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--blanc);
}

/* L'input réel étant transparent, l'anneau de focus est reporté sur le champ
 * dessiné (le seul lien DOM possible est :has(), l'input est imbriqué dans le
 * conteneur CF7 qui suit). */
.marcea-fichier--js:has(input[type='file']:focus-visible) .marcea-fichier__champ {
	outline: 2px solid var(--wp--preset--color--bleu-secondaire);
	outline-offset: 2px;
}

/* Puce « Parcourir » : 97x48, arrondie à gauche seulement (maquette). */
.marcea-fichier__parcourir {
	display: flex;
	flex: 0 0 6.0625rem;
	align-items: center;
	align-self: stretch;
	padding-inline: 0.9375rem;
	background: var(--wp--preset--color--bleu-clair);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

.marcea-fichier__nom {
	overflow: hidden;
	padding-inline: 1rem;
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.marcea-fichier.is-rempli .marcea-fichier__nom {
	color: var(--wp--preset--color--noir-profond);
}

/* Corbeille : icône 20px centrée dans la colonne de 45px (maquette). */
.marcea-fichier__vider {
	flex: 0 0 2.8125rem;
	align-self: stretch;
	padding: 0;
	border: 0;
	background: url('../img/vitrine/icone-poubelle.svg') no-repeat center / 20px 20px;
	cursor: pointer;
}

/* --- Retour aux règles communes du panneau ------------------------------- */

/* Consentement : case 24px à 7px du texte 14/20 gris (maquette). Le conteneur
 * CF7 reprend sa marge nulle (la règle générique du formulaire l'écrase). */
.marcea-form--panneau .marcea-form__consentement .wpcf7-form-control-wrap {
	margin-top: 0;
}

.marcea-form--panneau .marcea-form__consentement label {
	gap: 0.4375rem;
	color: var(--wp--preset--color--gris-texte);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

/* Case dessinée (24px, filet bleu clair) : la case native ne prend ni bordure
 * ni rayon. Cochée, elle reprend la coche de la charte (.marcea-checklist). */
.marcea-form--panneau .marcea-form__consentement input[type='checkbox'] {
	appearance: none;
	flex: 0 0 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 4px;
	background: var(--wp--preset--color--blanc);
	cursor: pointer;
}

.marcea-form--panneau .marcea-form__consentement input[type='checkbox']:checked {
	background:
		url('../img/vitrine/coche.svg') no-repeat center,
		var(--wp--preset--color--bleu-clair);
}

/* Bouton pleine largeur du panneau, à 24px du consentement. Le spinner CF7
 * (24px + marges, masqué au repos) est sorti du flux pour ne pas allonger le
 * panneau : il se superpose au bouton pendant l'envoi. */
.marcea-form--panneau .marcea-form__envoi {
	position: relative;
	margin-block: 1.5rem 0;
}

.marcea-form--panneau .marcea-form__envoi .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 1rem;
	margin: 0;
	transform: translateY(-50%);
}

/* .marcea-form input[submit] { font: inherit } l'emporte en spécificité sur
 * .marcea-btn : la graisse du bouton est réaffirmée ici. */
.marcea-form--panneau .marcea-form__envoi input[type='submit'] {
	display: block;
	width: 100%;
	font-weight: 600;
}

/* Entre 782 et 1300px les deux colonnes se resserrent (flex-shrink) et la photo
 * suit ; sous 782px les colonnes core s'empilent. */
@media (max-width: 1299.98px) {
	.marcea-rejoindre__grille {
		gap: 3rem;
	}
}

@media (max-width: 781.98px) {
	.marcea-rejoindre {
		padding-block: 2.625rem 3.75rem;
	}

	.marcea-rejoindre > h1 {
		margin-bottom: 2.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * Pages de formulaire (maquettes 1209:8047 « Demander une démo », 1212:8539
 * « Parler à un expert », 1212:8838 « Demander un diagnostic ») : même
 * squelette que /nous-rejoindre/ — page blanche sans hero dégradé, H1 centré,
 * colonne d'accroche et panneau beige portant le formulaire (habillage commun
 * .marcea-form--panneau). Seule la page démo ouvre sur un select.
 *
 * Rythme vertical maquette : 42px sous le header, 78px sous le H1, panneau
 * démarrant à 256 puis 84px avant le footer. La grille est calée à gauche sur
 * la gouttière alignwide (x=80) et s'arrête à x=1252 : la maquette laisse
 * volontairement du blanc à droite.
 * ------------------------------------------------------------------------- */

.marcea-formulaire {
	padding-block: 2.625rem 5.25rem;
}

/* H1 35/45 : le thème passe les h1 en 600, la maquette les veut en ExtraBold
 * comme les autres titres. */
.marcea-formulaire > h1 {
	margin-block: 0 4.875rem; /* 78px entre le bas du H1 et les colonnes */
	font-weight: 800;
}

/* Colonnes 553 (accroche) + 63 + 556 (panneau) : les largeurs sont portées par
 * les attributs de bloc (flex-basis en ligne), la mise en page core l'emportant
 * sur la feuille du thème. Marges UA neutralisées : le thème n'active pas
 * blockGap (ADR-007), l'espacement est porté ici. */
.marcea-formulaire__grille {
	margin-block: 0;
	gap: 3.9375rem;
}

/* Accroche : H2 22/30 puis texte 18/32 à 16px (démo, expert). Les marges sont
 * portées d'un seul côté à chaque jonction — le titre n'en a aucune en bas —
 * pour que la page diagnostic puisse imposer son propre écart sans dépendre
 * d'une fusion de marges. */
.marcea-formulaire__accroche h2 {
	margin-block: 0;
	line-height: 1.364;
}

/* Enfants directs seulement : le 18/32 de l'accroche ne doit pas atteindre les
 * descriptions des arguments, qui sont en 14/20 (le sélecteur de colonne est
 * plus spécifique que celui du composant .marcea-argument__texte). */
.marcea-formulaire__accroche > p {
	margin-block: 0;
	line-height: 1.778;
}

.marcea-formulaire__accroche > h2 + p {
	margin-top: 1rem;
}

/* Arguments de la page diagnostic : 36px sous le H2, 24px entre eux. Le
 * composant .marcea-argument (carte réassurance) porte déjà l'icône 46px et le
 * texte 14/20 ; seule sa marge basse est reprise par le gap. */
.marcea-formulaire__arguments {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2.25rem;
}

.marcea-formulaire__arguments .marcea-argument {
	margin-bottom: 0;
}

/* 4px entre le titre et la description (maquette) : le composant partagé les
 * colle. */
.marcea-formulaire__arguments .marcea-argument__texte strong {
	margin-bottom: 0.25rem;
}

/* Panneau du formulaire : beige, rayon 24, padding 32 (largeur utile 492). */
.marcea-formulaire__panneau {
	padding: 2rem;
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
}

/* Select « Solution souhaitée » (page démo) : la flèche native varie d'un
 * moteur à l'autre — elle est remplacée par le chevron de la charte, à 16px du
 * bord. La réserve à droite empêche un libellé long de passer dessous. */
.marcea-form--panneau select {
	appearance: none;
	padding: 0.8125rem 3.125rem 0.8125rem 0.9375rem;
	border-color: var(--wp--preset--color--bleu-clair);
	background:
		url('../img/vitrine/chevron-bas.svg') no-repeat right 1rem center / 24px 24px,
		var(--wp--preset--color--blanc);
	line-height: 1.43;
}

.marcea-form--panneau select:focus {
	border-color: var(--wp--preset--color--bleu-secondaire);
}

/* Entre 782 et 1300px les deux colonnes se resserrent (flex-shrink) ; sous
 * 782px les colonnes core s'empilent. */
@media (max-width: 1299.98px) {
	.marcea-formulaire__grille {
		gap: 3rem;
	}
}

@media (max-width: 781.98px) {
	.marcea-formulaire {
		padding-block: 2.625rem 3.75rem;
	}

	.marcea-formulaire > h1 {
		margin-bottom: 2.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * « Quelle solution choisir ? » (F8) — parcours en 5 étapes.
 * Maquettes 1001:6090 / 1002:6513 / 1002:6645 / 1255:7546 (étapes),
 * 1261:7713 (résultat) et 1255:7272 (repli expert).
 * ------------------------------------------------------------------------- */

.marcea-qsc {
	background: var(--wp--preset--color--beige);
	padding: 2.25rem 1.25rem 3.75rem;
}

/* Barre de progression : 5 segments de 165px séparés de 6px, sur l'emprise
 * de l'encart (848px). Les extrémités sont arrondies vers l'extérieur. */
.marcea-qsc__entete {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.75rem 1rem;
	width: 100%;
	max-width: 53rem;
	margin: 0 auto;
}

.marcea-qsc__jauge {
	display: flex;
	grid-column: 1 / -1;
	gap: 6px;
}

.marcea-qsc__segment {
	flex: 1;
	height: 6px;
	background: rgb(197 210 241 / 50%);
	transition: background-color 0.3s ease;
}

.marcea-qsc__segment:first-child {
	border-radius: 5px 0 0 5px;
}

.marcea-qsc__segment:last-child {
	border-radius: 0 9px 9px 0;
}

.marcea-qsc__segment.is-actif {
	background: var(--wp--preset--color--bleu-secondaire);
}

.marcea-qsc__compteur,
.marcea-qsc__suivante {
	margin: 0;
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.75rem;
	line-height: 1.667;
}

.marcea-qsc__compteur {
	font-weight: 300;
}

.marcea-qsc__suivante {
	text-align: right;
}

/* Encart blanc commun aux étapes et au repli. Sa hauteur suit son contenu
 * (arbitrage du 2026-09-07) : la barre de navigation se déplace donc d'une
 * étape à l'autre, ce que la hauteur figée de l'origine évitait. */
.marcea-qsc__scene {
	width: 100%;
	max-width: 53rem;
	margin: 1.3125rem auto 0;
}

.marcea-qsc__encart {
	padding: 2rem 3.75rem 3rem;
	border-radius: 24px;
	background: var(--wp--preset--color--blanc);
}

.marcea-qsc__groupe {
	margin: 0;
	padding: 0;
	border: 0;
}

.marcea-qsc__question {
	margin: 0 0 1.875rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.364;
}

.marcea-qsc__question.marcea-titre-souligne {
	background-position: bottom left;
	background-size: 238px 15px;
	padding-bottom: 1.5rem;
}

.marcea-qsc__question:focus {
	outline: none;
}

.marcea-qsc__question:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-secondaire);
	outline-offset: 4px;
}

/* Pastilles de réponse : de vrais boutons radio, masqués visuellement, dont
 * le label porte l'habillage — le clavier et les lecteurs d'écran gardent le
 * comportement natif d'un groupe de boutons radio. */
.marcea-qsc__options {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

/* Radio masqué visuellement : c'est le label `.marcea-qsc__option` qui porte
 * l'apparence et l'anneau de focus. Masquage propre au bloc et NON par
 * `.screen-reader-text` : WooCommerce Blocks (wc-blocks.css, chargé sur tout le
 * site) ajoute un `.screen-reader-text:focus` non scopé qui déclippe l'élément
 * et le pose à `top: 5px; left: 5px` — comportement voulu pour un lien
 * d'évitement, mais qui faisait surgir le radio en haut à gauche de l'écran dès
 * qu'un choix lui donnait le focus. */
.marcea-qsc__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.marcea-qsc__option {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.875rem;
	border: 1px solid var(--wp--preset--color--bleu-petard);
	border-radius: 50px;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1rem;
	line-height: 1.6;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

.marcea-qsc__option:hover,
.marcea-qsc__radio:checked + .marcea-qsc__option {
	background: var(--wp--preset--color--jaune);
	border-color: var(--wp--preset--color--jaune);
}

.marcea-qsc__radio:focus-visible + .marcea-qsc__option {
	outline: 2px solid var(--wp--preset--color--bleu-secondaire);
	outline-offset: 2px;
}

/* Étape 4 — compteurs (maquette 1255:7546). */
.marcea-qsc__compteurs {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.marcea-qsc__compteur-champ {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.marcea-qsc__compteur-champ label {
	color: var(--wp--preset--color--noir-profond);
	font-size: 1rem;
	line-height: 1.625;
}

.marcea-qsc__compteur-champ input {
	width: 6.25rem;
	height: 3rem;
	padding: 0 0.875rem;
	border: 1px solid var(--wp--preset--color--bleu-clair);
	border-radius: 8px;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--noir-profond);
	font-family: inherit;
	font-size: 0.875rem;
}

.marcea-qsc__compteur-champ input:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-secondaire);
	outline-offset: 1px;
}

/* Barre de navigation, 24px sous l'encart et alignée sur son bord droit. */
.marcea-qsc__navigation {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	width: 100%;
	max-width: 53rem;
	margin: 1.5rem auto 0;
}

.marcea-qsc__recommencer {
	background: transparent;
	color: var(--wp--preset--color--bleu);
	text-decoration: underline;
}

.marcea-qsc__recommencer:hover {
	background: transparent;
	color: var(--wp--preset--color--bleu-secondaire);
}

.marcea-qsc [data-qsc-suivant]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.marcea-qsc [data-qsc-suivant]:disabled:hover {
	background: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--blanc);
}

.marcea-qsc__gabarits,
.marcea-qsc .is-masque {
	display: none;
}

.marcea-qsc__noscript {
	max-width: 53rem;
	margin: 1.5rem auto 0;
}

/* --- Résultat (maquette 1261:7713) : conteneur élargi à 1280px, deux
 * colonnes de 848 et 400px séparées de 32px. --- */
.marcea-qsc.is-resultat .marcea-qsc__entete,
.marcea-qsc.is-resultat .marcea-qsc__scene,
.marcea-qsc.is-resultat .marcea-qsc__navigation {
	max-width: 80rem;
}

.marcea-qsc__resultat {
	display: grid;
	grid-template-columns: 53rem 25rem;
	gap: 2rem;
	align-items: start;
}

.marcea-qsc__encart--resultat {
	padding-bottom: 3.5rem;
}

.marcea-qsc__intro {
	margin: 0 0 0.875rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1rem;
	line-height: 1.625;
}

.marcea-qsc__solution {
	margin: 0 0 1.9375rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.364;
	background-position: bottom left;
	background-size: 233px 15px;
	padding-bottom: 1.5rem;
}

.marcea-qsc__visuel {
	display: block;
	width: 27.5625rem;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* CTA d'achat des solutions vendues en ligne, 30px sous le visuel. `display`
 * flex et non l'`inline-flex` du bouton : sur une ligne de texte, le plomb de
 * l'encart ajouterait quelques pixels sous lui. */
.marcea-qsc__achat {
	display: flex;
	width: fit-content;
	margin-top: 1.875rem;
}

.marcea-qsc__filet {
	margin: 3rem 0 1.5625rem;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--bleu-clair);
}

/* 29px entre le bouton d'achat et le filet, contre 48px sous le seul visuel. */
.marcea-qsc__achat:not([hidden]) + .marcea-qsc__filet {
	margin-top: 1.8125rem;
}

.marcea-qsc__solution-courte {
	margin: 0 0 0.6875rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.778;
}

.marcea-qsc__accroche {
	margin: 0 0 1.75rem;
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.875rem;
	line-height: 1.43;
}

/* Bénéfices : 4 lignes de 46px, pastille d'icône puis titre + description. */
.marcea-qsc__benefices {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

.marcea-qsc__benefice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.marcea-qsc__benefice-icone {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.875rem;
	height: 2.875rem;
	border-radius: 10px;
	background: rgb(197 210 241 / 50%);
	color: var(--wp--preset--color--bleu-secondaire);
}

.marcea-qsc__benefice-texte {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.43;
}

.marcea-qsc__benefice-texte strong {
	color: var(--wp--preset--color--noir-profond);
	font-weight: 600;
}

.marcea-qsc__benefice-texte span {
	color: var(--wp--preset--color--gris-texte);
}

.marcea-qsc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
}

/* --- Colonne droite du résultat. --- */
.marcea-qsc__panneau {
	padding: 2.1875rem 1.5rem 1.5rem;
	border-radius: 24px;
	background: var(--wp--preset--color--blanc);
}

.marcea-qsc__panneau-titre {
	margin: 0 0 1.9375rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
}

.marcea-qsc__panneau-intro {
	margin: 0 0 1.125rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1rem;
	line-height: 1.625;
}

.marcea-qsc__recap {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

/* Fond beige de la maquette, releve a #F8F6F5 sur le panneau blanc. Le libelle
 * y est en gris texte courant : il suit donc la couleur de corps du theme, sans
 * la surcharger. */
.marcea-qsc__recap-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--beige);
	font-size: 0.875rem;
	line-height: 1.43;
}

.marcea-qsc__coche {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 6px;
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--noir-profond);
}

.marcea-qsc__coche svg {
	width: 16px;
	height: 16px;
}

.marcea-qsc__conseil {
	padding: 1.5rem 1.5rem 1.75rem;
	border-radius: 16px;
	background: var(--wp--preset--color--bleu-clair);
}

.marcea-qsc__conseil-titre {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
}

.marcea-qsc__conseil p {
	margin: 0 0 1.375rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 0.875rem;
	line-height: 1.625;
}

/* --- Repli expert (maquette 1255:7272) : ni jauge ni libellés d'étape. --- */
.marcea-qsc__repli .marcea-qsc__intro {
	max-width: 45.5rem;
	margin-bottom: 2rem;
}

/* Entre 782 et 1300px la colonne de droite se resserre ; sous 782px les deux
 * colonnes s'empilent. */
@media (max-width: 1299.98px) {
	.marcea-qsc__resultat {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}
}

@media (max-width: 781.98px) {
	.marcea-qsc {
		padding: 1.5rem 1.25rem 2.5rem;
	}

	.marcea-qsc__encart {
		padding: 1.5rem 1.25rem 2rem;
	}

	.marcea-qsc__resultat {
		grid-template-columns: minmax(0, 1fr);
	}

	.marcea-qsc__navigation {
		flex-wrap: wrap;
		justify-content: stretch;
	}

	.marcea-qsc__navigation .marcea-btn {
		flex: 1 1 auto;
	}

	.marcea-qsc__question,
	.marcea-qsc__solution {
		background-size: 180px 12px;
	}

	.marcea-qsc__suivante {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Hub « Un service complet » (maquette 1277:7601) : hero photo, intro centrée
 * sur 1064px (styles .marcea-intro de « Qui sommes-nous »), puis grille 2x2
 * des quatre prestations. Déclaré après les pages entreprise : le hero en
 * reprend le cadre et n'en surcharge que le décalage du bloc texte.
 * ------------------------------------------------------------------------- */

/* Hero (nodes 1277:7602 et 1279:8711) : même cadre que les pages entreprise
 * (68px au-dessus de la photo, 71px en dessous) ; le bloc texte descend à 73px
 * du haut du dégradé au lieu des 18px de « Qui sommes-nous ». Les maquettes
 * « Un service complet » et « Facture électronique » posent le même cadre au
 * pixel près, jusqu'à la photo qu'elles partagent. */
.marcea-hero--service .marcea-hero__texte,
.marcea-hero--facture .marcea-hero__texte {
	padding-top: 4.5625rem;
}

/* 144px entre les cartes et le bandeau question (l'intro porte déjà les 102px
 * qui les séparent du texte d'introduction). */
.marcea-prestations {
	padding-block: 0 9rem;
}

/* Deux colonnes de 524px dans la colonne de 1064px ; gouttières maquette
 * 18px/43px arrondies à 20/40. grid-auto-rows aligne les quatre cartes sur la
 * plus haute, comme la maquette qui les fixe toutes à 522px. */
.marcea-prestations__grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 2.5rem 1.25rem;
}

/* Carte prestation (nodes 1277:8106/8118/8130/8140). Rythme maquette :
 * pastille « Etape N » à 34px du haut, titre à 23px de la pastille,
 * soulignement jaune calé sur la largeur du titre, texte à 15px du titre,
 * 24px de padding latéral, 40px en bas. */
.marcea-prestation {
	border-radius: 24px;
	background: var(--wp--preset--color--beige);
	padding: 2.125rem 1.5rem 2.5rem;
	margin: 0;
}

.marcea-prestation__etape {
	display: inline-block;
	border-radius: 50px;
	background: var(--wp--preset--color--jaune);
	padding: 0.5rem 1.25rem;
	margin: 0 0 1.4375rem;
	color: var(--wp--preset--color--noir-profond);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.6667;
}

/* Le soulignement s'étire à la largeur du titre, donc le h3 est réduit à son
 * contenu. Les cartes utilisent le layout « flow » et non « constrained » :
 * ce dernier centrerait le titre avec un margin-inline auto !important. */
.marcea-prestation__titre {
	width: fit-content;
	background: url('../img/vitrine/soulignement-jaune.svg') no-repeat left bottom;
	background-size: 100% 13px;
	padding-bottom: 1.0625rem;
	margin: 0 0 0.9375rem;
}

/* Accroche en gras (16px/28px), suivie d'une ligne vide dans la maquette. */
.marcea-prestation__accroche {
	margin: 0 0 1.75rem;
	font-weight: 700;
	line-height: 1.75;
}

.marcea-prestation p:last-child {
	margin-bottom: 0;
}

/* Pas de maquette mobile : les cartes s'empilent au point de rupture des
 * colonnes core. */
@media (max-width: 781.98px) {
	.marcea-prestations__grille {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Page « Diagnostic gratuit » (maquette 1277:8196) : hero photo, bande beige
 * des trois raisons, déroulé du diagnostic en duo texte/visuel, puis le bloc
 * de réassurance commun. Déclaré après les pages entreprise dont le hero et le
 * duo reprennent les cadres : l'ordre du fichier porte la dépendance.
 * ------------------------------------------------------------------------- */

/* Hero (node 1277:8197) : même cadre que les pages entreprise (68px au-dessus
 * de la photo, 71px en dessous) ; le bloc texte descend à 73px du haut du
 * dégradé, comme « Un service complet ». */
.marcea-hero--diagnostic .marcea-hero__texte {
	padding-top: 4.5625rem;
}

/* « Pourquoi demander un diagnostic ? » (node 1277:8509, bande de 548px).
 * Espacements maquette : 100px au-dessus du titre, 45px avant les cartes,
 * 127px en bas. */
.marcea-raisons {
	padding-block: 6.25rem 7.9375rem;
}

.marcea-raisons > h2 {
	margin-bottom: 2.8125rem;
}

/* Trois cartes de 417px dans la rangée alignwide de 1280px (gouttière 16px). */
.marcea-raisons__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

/* Carte raison (nodes 1277:8489/8513/8514). Rythme maquette : icône 60px à
 * 24px du haut, titre à 23px de l'icône, texte 14px/20px à 16px du titre,
 * 32px de padding latéral, 41px en bas. */
.marcea-carte-raison {
	padding: 1.5rem 2rem 2.5625rem;
	border-radius: 16px;
	background: var(--wp--preset--color--blanc);
	text-align: center;
}

.marcea-carte-raison__icone {
	width: 60px;
	margin: 0 auto;
}

.marcea-carte-raison h3 {
	margin: 1.4375rem 0 0;
	font-weight: 700;
	line-height: 1.5;
}

.marcea-carte-raison p {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--gris-texte);
	line-height: 1.43;
}

/* « Comment se déroule le diagnostic ? » (nodes 1279:8709, 1279:8641-8643 et
 * 1279:8707) : duo texte + visuel de 524px repris de « Qui sommes-nous »
 * (rangée de 1152px, gouttière 60px). Espacements maquette : 101px au-dessus
 * du visuel, 100px en dessous. */
.marcea-deroule {
	padding-block: 6.3125rem 6.25rem;
}

/* Le texte démarre 24px sous le haut du visuel (maquette). */
.marcea-deroule__texte {
	padding-top: 1.5rem;
}

/* Titre borné à sa largeur maquette (524px) pour conserver ses deux lignes ;
 * interligne 40px et 41px avant la première étape. */
.marcea-deroule__texte h2 {
	max-width: 32.75rem;
	margin: 0 0 2.5625rem;
	line-height: 1.3333;
}

/* 24px entre les étapes, contre 16px dans le bloc réassurance. */
.marcea-deroule .marcea-argument {
	margin-bottom: 1.5rem;
}

/* La carte de réassurance porte elle-même ses 60px de marge : neutralisés ici,
 * les 100px au-dessus viennent de .marcea-deroule et les 106px avant le
 * bandeau question de ce conteneur (maquette). */
.marcea-diagnostic-reassurance {
	padding-block: 0 6.625rem;
}

.marcea-diagnostic-reassurance .marcea-reassurance {
	margin-block: 0;
}

/* Pas de maquette mobile : les cartes s'empilent au point de rupture des
 * colonnes core. */
@media (max-width: 781.98px) {
	.marcea-raisons__grille {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Chat Pipedrive (inc/chat.php) : bouton mascotte flottant, et visibilité du
 * conteneur du playbook injecté par le tiers.
 * ------------------------------------------------------------------------- */

.marcea-chat {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 3px solid var(--wp--preset--color--jaune);
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	/* Ombre portée en bleu secondaire (#202DA3). */
	box-shadow: 0 4px 20px 0 rgb(32 45 163 / 45%);
	cursor: pointer;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.marcea-chat:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 28px 0 rgb(32 45 163 / 60%);
}

.marcea-chat img {
	display: block;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: contain;
}

/* Badge « 1 nouveau message » : révélé par assets/js/chat.js tant que le
 * visiteur n'a pas ouvert le chat. */
.marcea-chat__badge {
	display: none;
	position: absolute;
	top: -6px;
	left: -6px;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 2px solid var(--wp--preset--color--blanc);
	border-radius: 50%;
	background: var(--wp--preset--color--jaune);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--bleu-secondaire);
	animation: marcea-chat-pulsation 2s infinite;
}

.marcea-chat--nouveau .marcea-chat__badge {
	display: flex;
}

@keyframes marcea-chat-pulsation {
	50% {
		transform: scale(1.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marcea-chat,
	.marcea-chat__badge {
		transition: none;
		animation: none;
	}
}

/* Le conteneur du playbook est injecté par Pipedrive avec ses propres styles
 * inline (#LeadboosterContainer : ID tiers, non contractuel). La règle
 * !important est ce qui le tient masqué tant que le visiteur n'a pas cliqué le
 * pingouin — sans elle, il faudrait le re-masquer en boucle depuis le JS. */
html:not(.marcea-chat-ouvert) #LeadboosterContainer {
	display: none !important;
}

/* Au-delà de 768px, la fenêtre de chat se décale à gauche du bouton pour ne
 * pas le recouvrir. */
@media (min-width: 769px) {
	.marcea-chat-ouvert #LeadboosterContainer {
		right: 118px !important;
		left: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Consentement cookies (template-parts/consent-banner.php, ADR-017).
 * Structure et textes repris du site actuel (marcea.fr), habillage Marcea.
 *
 * Les deux éléments sont masqués par défaut : c'est le script de tête de
 * inc/consent.php qui pose la classe sur <html> et révèle l'un ou l'autre.
 * Sans JavaScript, rien ne s'affiche — et rien n'est déposé non plus.
 * ------------------------------------------------------------------------- */

.marcea-cookies {
	display: none;
	position: fixed;
	inset: 0;
	/* Au-dessus du header collant (50) et du chat (40), sous le skip link. */
	z-index: 90;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	/* Noir profond (#051718) à 60 %. */
	background: rgb(5 23 24 / 60%);
}

.marcea-consent-ouvert .marcea-cookies {
	display: flex;
}

.marcea-cookies__panneau {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 45rem;
	max-height: 90vh;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--blanc);
	box-shadow: 0 15px 40px 0 rgb(5 23 24 / 25%);
	overflow: hidden;
}

/* Conteneur non interactif, focalisé par le script à l'ouverture pour porter
 * le dialogue : le contour de focus n'y apporte rien. */
.marcea-cookies__panneau:focus-visible {
	outline: none;
}

/* Onglets ------------------------------------------------------------------ */

.marcea-cookies__onglets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--wp--preset--color--bleu-clair);
}

.marcea-cookies__onglet {
	padding: 1.125rem 0.5rem;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--bleu);
	cursor: pointer;
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}

.marcea-cookies__onglet[aria-selected='true'] {
	border-bottom-color: var(--wp--preset--color--bleu-secondaire);
	color: var(--wp--preset--color--bleu-secondaire);
}

/* Contenus ----------------------------------------------------------------- */

.marcea-cookies__contenus {
	padding: 1.5rem;
	overflow-y: auto;
}

.marcea-cookies__contenu {
	display: none;
}

.marcea-cookies[data-onglet='cookies'] .marcea-cookies__contenu[data-onglet='cookies'],
.marcea-cookies[data-onglet='details'] .marcea-cookies__contenu[data-onglet='details'],
.marcea-cookies[data-onglet='apropos'] .marcea-cookies__contenu[data-onglet='apropos'] {
	display: block;
}

.marcea-cookies__contenu p {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--gris-texte);
}

.marcea-cookies__contenu p:last-child {
	margin-bottom: 0;
}

/* Catégories --------------------------------------------------------------- */

.marcea-cookies__categorie {
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--beige);
}

.marcea-cookies__categorie + .marcea-cookies__categorie {
	margin-top: 0.75rem;
}

.marcea-cookies__categorie-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.marcea-cookies__categorie-entete strong {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--noir-profond);
}

/* Interrupteur : la case reste focusable (transparente, superposée au rail),
 * seul son habillage est dessiné par le label. */
.marcea-switch {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
}

.marcea-switch__input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.marcea-switch__input:disabled {
	cursor: default;
}

.marcea-switch__label {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	background: var(--wp--preset--color--gris);
	transition: background-color 0.2s ease;
}

.marcea-switch__label::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	transition: transform 0.2s ease;
}

.marcea-switch__input:checked + .marcea-switch__label {
	background: var(--wp--preset--color--bleu-secondaire);
}

.marcea-switch__input:checked + .marcea-switch__label::after {
	transform: translateX(20px);
}

/* « Obligatoire » : coché et verrouillé — le bleu clair dit « actif, mais pas
 * à votre main ». */
.marcea-switch__input:disabled + .marcea-switch__label {
	background: var(--wp--preset--color--bleu-clair);
}

.marcea-switch__input:focus-visible + .marcea-switch__label {
	outline: 2px solid var(--wp--preset--color--bleu-secondaire);
	outline-offset: 2px;
}

/* Actions ------------------------------------------------------------------ */

.marcea-cookies__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--bleu-clair);
	background: var(--wp--preset--color--beige);
}

.marcea-cookies__actions .marcea-btn {
	flex: 1 1 auto;
}

/* « Paramétrer » mène à l'onglet Details : il n'a plus lieu d'être une fois
 * qu'on y est, où il est remplacé par « Accepter la sélection ». */
.marcea-cookies[data-onglet='details'] .marcea-cookies__action--parametrer,
.marcea-cookies:not([data-onglet='details']) .marcea-cookies__action--selection {
	display: none;
}

/* Pastille de réouverture -------------------------------------------------- */

.marcea-cookies-reouvrir {
	display: none;
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 40;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--bleu);
	box-shadow: 0 15px 30px 0 rgb(1 7 39 / 13%);
	cursor: pointer;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.marcea-consent-pastille .marcea-cookies-reouvrir {
	display: flex;
}

.marcea-cookies-reouvrir:hover {
	color: var(--wp--preset--color--bleu-secondaire);
	transform: scale(1.08);
}

@media (max-width: 600px) {
	.marcea-cookies {
		padding: 0.75rem;
	}

	.marcea-cookies__onglet {
		padding: 1rem 0.25rem;
		font-size: 0.8125rem;
	}

	.marcea-cookies__contenus,
	.marcea-cookies__actions {
		padding: 1.25rem 1rem;
	}

	.marcea-cookies__actions .marcea-btn {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.marcea-cookies__onglet,
	.marcea-switch__label,
	.marcea-switch__label::after,
	.marcea-cookies-reouvrir {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Page « Facture électronique » (maquette 1279:8710) : vidéo de présentation
 * auto-hébergée, duo visuel/texte, bande beige des guides (checklist +
 * formulaire livre blanc) et le bloc de réassurance commun. Le hero reprend le
 * cadre de « Un service complet » (déclaré plus haut), le duo celui de
 * « Qui sommes-nous » et la carte celui de Sage Active : ce bloc ne porte que
 * les rythmes propres à la page.
 * ------------------------------------------------------------------------- */

/* Vidéo de présentation (node 1279:8962). Espacements maquette : 85px sous le
 * hero, 49px entre le titre et le cadre, 129px avant le duo. */
.marcea-facture-video {
	padding-block: 5.3125rem 8.0625rem;
}

/* Titre borné à sa largeur maquette (873px) pour conserver ses deux lignes. */
.marcea-facture-video > h2 {
	max-width: 54.5625rem;
	margin-bottom: 3.0625rem;
}

/* Le cadre suit le format de la source, verticale depuis le 2026-08-27 (montage
 * 9:16 fourni par Marcea, ADR-021 amendé) et non plus le 948×544 de la maquette.
 * Borné à 380px : au-delà, la colonne dépasse 676px de haut et occupe seule
 * l'écran. L'affiche est au même format que la vidéo, aucune bande à masquer. */
.marcea-facture-video__cadre {
	max-width: 380px;
}

.marcea-facture-video__cadre figure {
	margin-block: 0;
}

.marcea-facture-video__cadre video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	height: auto;
	border-radius: 24px;
}

/* « La facture électronique, c'est quoi au juste ? » (nodes 1279:8981/8973) :
 * visuel de 524px et texte de 568px sur la rangée de 1152px, gouttière 60px
 * portée par .marcea-duo. Le blanc au-dessus vient de la section vidéo ; 102px
 * avant la bande beige. */
.marcea-definition {
	padding-block: 0 6.375rem;
}

.marcea-definition__texte h2 {
	margin: 0 0 1rem;
	line-height: 1.3333;
}

.marcea-definition__texte p {
	margin-block: 0;
}

/* La maquette sépare les trois paragraphes par une ligne vide — soit un
 * interligne de 16/1.6. */
.marcea-definition__texte p + p {
	margin-top: 1.6rem;
}

/* Bande beige des guides (nodes 1279:9054 à 1279:9154). Espacements maquette :
 * 81px de padding haut, 78px sous le panneau (la colonne la plus haute ; la
 * maquette laisse 118px sous la checklist, plus courte). Colonnes
 * 568 + 28 + 556 : le panneau s'aligne à droite sur le duo et sur la carte de
 * réassurance, là où la maquette l'arrête 23px plus tôt. */
.marcea-guides {
	padding-block: 5.0625rem 4.875rem;
}

/* Marges UA neutralisées : le thème n'active pas blockGap (ADR-007). */
.marcea-guides__grille {
	margin-block: 0;
	gap: 1.75rem;
}

/* 17px sous l'icône, 16px sous le titre, 32px avant la checklist. */
.marcea-guides__icone {
	margin: 0 0 1.0625rem;
}

.marcea-guides__intro h2 {
	margin: 0 0 1rem;
	line-height: 1.3333;
}

.marcea-guides__accroche {
	margin: 0 0 2rem;
	color: var(--wp--preset--color--gris-texte);
}

/* Puces de la charte posées sur la bande beige : fond blanc, largeur fixe de
 * la maquette (505px, ramenée à la colonne par le max-width du composant) et
 * 16px de padding au lieu de 8/10. */
.marcea-guides__liste {
	margin-block: 0;
}

.marcea-guides__liste li {
	width: 31.5625rem;
	padding: 1rem;
	margin-bottom: 0.5rem;
	background: var(--wp--preset--color--blanc);
	font-weight: 600;
}

/* Panneau du formulaire : blanc sur la bande beige, soit l'inverse des pages
 * de demande ; même rayon et même padding. L'habillage des champs vient de
 * .marcea-form--panneau, porté par la colonne (sélecteurs descendants) pour
 * laisser intact le formulaire mutualisé des fiches livres blancs. */
.marcea-guides__panneau {
	padding: 2rem;
	border-radius: 24px;
	background: var(--wp--preset--color--blanc);
}

/* Carte de réassurance (node 1279:9210) : 102px au-dessus, 106px avant le
 * bandeau question. La carte porte elle-même 60px de marge, neutralisés ici.
 * La maquette laisse 362px de blanc avant le bandeau — du vide de canevas,
 * ramené au rythme de « Diagnostic gratuit ». */
.marcea-facture-reassurance {
	padding-block: 6.375rem 6.625rem;
}

.marcea-facture-reassurance .marcea-reassurance {
	margin-block: 0;
}

/* La maquette aligne le titre sur le haut de la photo. Les autres pages qui
 * portent la carte ouvrent sur un paragraphe, où la marge UA du h2 (25px) ne
 * se voit pas : elle n'est neutralisée qu'ici. */
.marcea-facture-reassurance .marcea-reassurance h2 {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Simulateur ROI (F7) — maquette 1332:8853.
 *
 * Gouttière reconstruite à 1280 (ADR-025) : la maquette place la carte gauche
 * à x=65 et la droite à x=729→1360, ce qui donnerait des marges asymétriques et
 * des paddings internes incohérents. Lue à 80→1360, elle donne deux cartes de
 * 632 séparées de 16px avec 60px de padding des deux côtés — et les deux
 * colonnes tombent alors exactement sur les 635px de hauteur de la maquette.
 * ------------------------------------------------------------------------- */

.marcea-simulateur {
	padding-block: 2.625rem 5.5625rem;
}

/* H1 35/45 : le thème passe les h1 en 600, la maquette les veut en ExtraBold
 * comme les autres titres. */
.marcea-simulateur > h1 {
	margin-block: 0;
	font-weight: 800;
}

/* Sélecteur à deux classes : la règle de mise en page core impose sinon le
 * contentSize du groupe (1200) au paragraphe, à spécificité égale. */
.marcea-simulateur > .marcea-simulateur__accroche {
	max-width: 52.875rem;
	margin-block: 1.25rem 0;
	margin-inline: auto;
}

/* La grille du simulateur déborde le contentSize du groupe pour tenir sur la
 * gouttière alignwide. Le sélecteur descendant l'emporte sur la règle de mise
 * en page core, dont le :where() ne pèse rien. */
.marcea-simulateur .marcea-roi {
	max-width: 80rem;
	margin-top: 2.625rem;
}

/* --- Onglets (maquette 1334:9233) ---------------------------------------- */

.marcea-roi__onglets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.marcea-roi__onglet {
	padding: 0.875rem 1.5rem;
	border: 1px solid var(--wp--preset--color--noir-profond);
	border-radius: 0.5rem;
	background: transparent;
	color: var(--wp--preset--color--noir-profond);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.43;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

.marcea-roi__onglet.is-actif {
	border-color: var(--wp--preset--color--jaune);
	background: var(--wp--preset--color--jaune);
}

.marcea-roi__onglet:hover:not(.is-actif) {
	border-color: var(--wp--preset--color--bleu-clair);
	background: var(--wp--preset--color--bleu-clair);
}

/* --- Panneau : les deux cartes ------------------------------------------- */

.marcea-roi__panneau {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 3.75rem;
}

/* Le display: grid l'emporterait sur le display: none de l'agent utilisateur. */
.marcea-roi__panneau[hidden] {
	display: none;
}

.marcea-roi__carte {
	padding: 2.625rem 3.75rem 1.8125rem;
	border-radius: 24px;
}

.marcea-roi__carte--saisie {
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	background: var(--wp--preset--color--blanc);
}

/* Bordure transparente : sans elle, le 1px de la carte de saisie décalerait
 * ses contenus d'un pixel et les deux titres ne seraient plus alignés. */
.marcea-roi__carte--resultats {
	padding-bottom: 3.0625rem;
	border: 1px solid transparent;
	background: rgb(197 210 241 / 30%);
}

/* Titres 22/30 ExtraBold, soulignés à gauche sur la largeur du mot (maquette
 * 1334:9259 et 1334:9383). Le padding réserve la hauteur du coup de pinceau. */
.marcea-roi__titre {
	margin-block: 0;
	padding-bottom: 0.9375rem;
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 800;
	line-height: 1.364;
}

.marcea-titre-souligne--saisie {
	background-position: bottom left;
	background-size: 197px 15px;
}

.marcea-titre-souligne--resultats {
	background-position: bottom left;
	background-size: 171px 15px;
}

/* --- Colonne de saisie : deux groupes « libellé + champ + curseur » ------- */

.marcea-roi__groupe {
	margin-top: 0.75rem;
}

/* Rythme de 130px d'un groupe à l'autre (48 + 10 + 22 + 50). */
.marcea-roi__groupe + .marcea-roi__groupe {
	margin-top: 3.125rem;
}

.marcea-roi__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.marcea-roi__label {
	color: var(--wp--preset--color--gris-texte);
	font-weight: 700;
	line-height: 1.75;
}

/* Champ de 48px : 13 + 20 (14/1.43) + 13 + 2px de bordure, comme les
 * formulaires en panneau. Les flèches natives sont retirées : le curseur juste
 * en dessous joue déjà ce rôle, et elles recouvriraient « 50 000 ». */
.marcea-roi__nombre {
	width: 5.625rem;
	padding: 0.8125rem 1rem;
	border: 1px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--gris-texte);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
	appearance: textfield;
}

.marcea-roi__nombre::-webkit-outer-spin-button,
.marcea-roi__nombre::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

/* Curseur : piste de 6px, pouce de 22px (maquette 1334:10047). La boîte fait
 * la hauteur du pouce pour que la zone cliquable le couvre ; le dégradé est
 * porté par une variable, --roi-remplissage étant posé en ligne par le rendu
 * serveur puis mis à jour par le view script. */
.marcea-roi__curseur {
	--roi-piste: linear-gradient(
		to right,
		var(--wp--preset--color--bleu-secondaire) var(--roi-remplissage, 0%),
		var(--wp--preset--color--bleu-clair) var(--roi-remplissage, 0%)
	);

	/* display: block — en inline, le demi-interligne sous la ligne de base
	 * ajoute 8px sous chaque curseur et décale toute la colonne de 16px. */
	display: block;
	width: 100%;
	height: 1.375rem;
	margin-top: 0.625rem;
	background: transparent;
	cursor: pointer;
	appearance: none;
}

.marcea-roi__curseur::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: var(--roi-piste);
}

.marcea-roi__curseur::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: var(--roi-piste);
}

.marcea-roi__curseur::-webkit-slider-thumb {
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	/* (piste 6 − pouce 22) / 2 : recentre le pouce sur la piste. */
	margin-top: -8px;
	border: 3px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 50%;
	background: var(--wp--preset--color--jaune);
	cursor: pointer;
	appearance: none;
}

.marcea-roi__curseur::-moz-range-thumb {
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	border: 3px solid var(--wp--preset--color--bleu-secondaire);
	border-radius: 50%;
	background: var(--wp--preset--color--jaune);
	cursor: pointer;
}

/* --- Bases de calcul ------------------------------------------------------ */

.marcea-roi__bases-titre {
	margin-block: 3.75rem 0;
	color: var(--wp--preset--color--bleu-secondaire);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
}

.marcea-roi__bases {
	display: flex;
	gap: 1.8125rem;
	margin-block: 1.6875rem 0;
	padding-left: 0;
	list-style: none;
}

.marcea-roi__base {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	min-height: 8.8125rem;
	padding: 0.9375rem 0.75rem 1.1875rem;
	border-radius: 0.5rem;
	background: rgb(197 210 241 / 30%);
	text-align: center;
}

.marcea-roi__base--total {
	background: var(--wp--preset--color--jaune);
}

/* Opérateurs « + + = » centrés dans la gouttière, à hauteur des valeurs. */
.marcea-roi__base + .marcea-roi__base::before {
	content: '+';
	position: absolute;
	top: 3.5625rem;
	right: calc(100% + 0.90625rem);
	transform: translateX(50%);
	color: var(--wp--preset--color--noir-profond);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
}

.marcea-roi__base + .marcea-roi__base--total::before {
	content: '=';
}

.marcea-roi__base-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 4px;
	background: rgb(197 210 241 / 50%);
	color: var(--wp--preset--color--gris-texte);
}

.marcea-roi__base--total .marcea-roi__base-icone {
	background: var(--wp--preset--color--jaune-clair);
}

.marcea-roi__base-valeur {
	margin-top: 0.6875rem;
	color: var(--wp--preset--color--bleu-secondaire);
	font-weight: 700;
	line-height: 1.75;
}

.marcea-roi__base-label {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.75rem;
	line-height: 1.333;
}

.marcea-roi__mention {
	margin-block: 1.625rem 0;
	font-size: 0.75rem;
	line-height: 1.333;
}

/* --- Colonne des résultats ------------------------------------------------ */

.marcea-roi__estimations {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2.1875rem;
}

.marcea-roi__resultat {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1.5rem 2rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--bleu-secondaire);
}

.marcea-roi__resultat-icone,
.marcea-roi__conseil-icone {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 4px;
	color: var(--wp--preset--color--gris-texte);
}

.marcea-roi__resultat-icone {
	background: var(--wp--preset--color--jaune-clair);
}

.marcea-roi__conseil-icone {
	background: rgb(255 255 255 / 80%);
}

.marcea-roi__resultat-corps {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.marcea-roi__resultat-label {
	color: var(--wp--preset--color--blanc);
	font-weight: 700;
	line-height: 1.75;
}

.marcea-roi__resultat-valeur {
	color: var(--wp--preset--color--jaune);
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 800;
	line-height: 1.2857;
}

/* Sous le seuil de rentabilité, le montant négatif cède la place à la phrase de
 * seuil : deux lignes de 25px, soit sensiblement l'emprise des 45px du montant,
 * pour que la bascule ne fasse pas sauter la carte. */
.marcea-roi__resultat-seuil {
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
}

.marcea-roi__resultat-seuil [data-roi-valeur] {
	color: var(--wp--preset--color--jaune);
}

.marcea-roi__resultat-sous {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

.marcea-roi__conseil {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	padding: 2rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--bleu-clair);
}

/* 363px maquette : la phrase tient en quatre lignes, ce qui fixe la hauteur de
 * l'encart et cale la colonne sur les 635px de la carte de saisie. */
.marcea-roi__conseil-texte {
	max-width: 22.6875rem;
	margin-block: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.43;
}

.marcea-roi__noscript {
	margin-block: 1.5rem 0;
	text-align: center;
}

/* --- Focus clavier -------------------------------------------------------- */

.marcea-roi__onglet:focus-visible,
.marcea-roi__nombre:focus-visible,
.marcea-roi__curseur:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-secondaire);
	outline-offset: 4px;
}

/* --- Adaptations ---------------------------------------------------------- */

/* Sous 1300px les cartes se resserrent : 40px de padding et une gouttière de
 * tuiles réduite, faute de quoi « 0,79 min » ne tiendrait plus sur sa tuile. */
@media (max-width: 1299.98px) {
	.marcea-roi__carte {
		padding-inline: 2.5rem;
	}

	.marcea-roi__bases {
		gap: 1rem;
	}

	.marcea-roi__base + .marcea-roi__base::before {
		right: calc(100% + 0.5rem);
	}
}

/* Sous 1024px les deux cartes s'empilent : à deux colonnes, la colonne de
 * saisie ne tiendrait plus ses quatre tuiles. */
@media (max-width: 1023.98px) {
	.marcea-roi__panneau {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781.98px) {
	.marcea-simulateur {
		padding-block: 2.625rem 3.75rem;
	}

	.marcea-roi__carte {
		padding-inline: 2rem;
	}
}

/* Sous 560px les tuiles passent en 2×2 : les opérateurs, qui n'ont plus de
 * gouttière continue à occuper, sont retirés — le libellé « Gain total » et
 * l'aplat jaune portent seuls la lecture de l'addition. */
@media (max-width: 559.98px) {
	.marcea-roi__bases {
		flex-wrap: wrap;
	}

	.marcea-roi__base {
		flex-basis: calc(50% - 0.5rem);
	}

	.marcea-roi__base + .marcea-roi__base::before {
		content: none;
	}
}

/* ---------------------------------------------------------------------------
 * Section « Contactez-nous » du simulateur : le socle des pages de demande,
 * avec la bande beige et le panneau blanc inversés, et la grille centrée au
 * lieu d'être calée sur la gouttière alignwide.
 * ------------------------------------------------------------------------- */

.marcea-formulaire--beige {
	padding-block: 4.375rem 5.4375rem;
}

.marcea-formulaire--beige .marcea-formulaire__grille {
	justify-content: center;
}

.marcea-formulaire--beige .marcea-formulaire__panneau {
	background: var(--wp--preset--color--blanc);
}

.marcea-formulaire--beige .marcea-formulaire__accroche > h2 + p {
	margin-top: 1.375rem;
}