/**
 * MGP Énergies — portage de la maquette de référence (mgp.html).
 * Les conteneurs Elementor portent les classes .mgp-* ; la mise en page vient d'ici.
 * Aucune valeur en px : rem / em / % / clamp() uniquement.
 *
 * NB spécificité : Elementor charge post-N.css et base-desktop.css APRÈS cette
 * feuille. Les règles de mise en page sont donc préfixées par .mgp-page (classe
 * de body) pour passer devant .e-con quel que soit l'ordre de chargement.
 */

:root {
	--mgp-cream: #EDE6DA;
	--mgp-cream-2: #F5F0E7;
	--mgp-navy: #1B3A5B;
	--mgp-navy-2: #12293F;
	--mgp-teal: #3BA9C4;
	--mgp-teal-2: #2C93AD;
	--mgp-ink: #20303C;
	--mgp-muted: #5B6A76;
	--mgp-grad: linear-gradient(135deg, var(--mgp-teal) 0%, var(--mgp-navy) 100%);
	--mgp-shadow-sm: 0 0.25rem 1.125rem rgba(27, 58, 91, .10);
	--mgp-shadow-md: 0 0.875rem 2.5rem rgba(27, 58, 91, .16);
	--mgp-radius: 1.25rem;
}

/* ---------- Base ---------- */
body {
	background: var(--mgp-cream-2);
	color: var(--mgp-ink);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--mgp-teal-2); text-decoration: none; }
a:hover { color: var(--mgp-teal); }
.mgp-page h1, .mgp-page h2, .mgp-page h3, .mgp-page h4 { line-height: 1.15; }
.mgp-page p:last-child { margin-bottom: 0; }

/* ---------- HEADER (thème Hello, toutes pages) ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

.site-header.dynamic-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(245, 240, 231, .85);
	-webkit-backdrop-filter: blur(0.75rem);
	backdrop-filter: blur(0.75rem);
	border-bottom: 0.0625rem solid rgba(27, 58, 91, .08);
	padding-block: .9rem;
}
.site-header .site-logo img,
.site-header .custom-logo { height: 3.1rem; width: auto; max-width: none; }
/* Le réglage « largeur du logo » du kit Elementor (post-7.css,
   .site-header .site-branding .site-logo img → width/max-width: 9rem, 0,3,1)
   fixait aussi la largeur : 144×50 px au lieu de 125×50, logo étiré de 15 %.
   Ici (0,4,1) : la largeur suit la hauteur, proportions du fichier respectées. */
.site-header .site-branding .site-logo img.custom-logo { width: auto; max-width: none; height: 3.1rem; }

.site-header .site-navigation ul.menu { gap: clamp(1rem, 2vw, 1.9rem); }
.site-header .site-navigation ul.menu li a {
	font-weight: 500;
	font-size: .98rem;
	color: var(--mgp-ink);
	position: relative;
	transition: color .2s ease;
}
.site-header .site-navigation ul.menu li a:hover { color: var(--mgp-teal-2); }
.site-header .site-navigation ul.menu li:not(.menu-cta) a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -.35rem;
	width: 0;
	height: 0.125rem;
	background: var(--mgp-teal);
	transition: width .25s;
}
.site-header .site-navigation ul.menu li:not(.menu-cta) a:hover::after { width: 100%; }

.site-header .site-navigation ul.menu li.menu-cta a,
.site-navigation-dropdown ul li.menu-cta a {
	background: var(--mgp-grad);
	color: #fff;
	border-radius: 999rem;
	padding: .65em 1.2em;
	font-size: .92rem;
	font-weight: 600;
	box-shadow: var(--mgp-shadow-sm);
}
.site-header .site-navigation ul.menu li.menu-cta a:hover { color: #fff; opacity: .92; }
.site-header .site-navigation ul.menu li.menu-cta a::after { display: none; }

/* ---------- SOUS-MENU « Prestations » (ordinateur) ----------
   Hello : ul.sub-menu en display:none/block au survol, carré blanc sans style.
   Ici : panneau arrondi en fondu, ouvert au survol ET au clavier (focus-within).
   Sélecteurs en ul.sub-menu (0,4,4) pour passer devant le soulignement animé
   des liens du menu (li:not(.menu-cta) a::after, 0,4,3). */
.site-header .site-navigation ul.menu li.menu-item-has-children { padding-inline-end: 0; gap: .3rem; }
/* Chevron dessiné (le glyphe ▾ de Hello rendait comme un tiret en petite taille) */
.site-header .site-navigation ul.menu li.menu-item-has-children::after {
	content: "";
	display: block;
	align-self: center;
	flex: none;
	width: .42rem;
	height: .42rem;
	margin: 0 0 .2rem;
	border-right: .125rem solid var(--mgp-teal-2);
	border-bottom: .125rem solid var(--mgp-teal-2);
	transform: rotate(45deg);
	transition: transform .2s ease, margin .2s ease;
}
.site-header .site-navigation ul.menu li.menu-item-has-children:hover::after,
.site-header .site-navigation ul.menu li.menu-item-has-children:focus-within::after { transform: rotate(-135deg); margin-bottom: -.1rem; }
.site-header .site-navigation ul.menu ul.sub-menu {
	display: block;
	top: calc(100% + .9rem);
	left: -1rem;
	min-width: 17rem;
	padding: .5rem;
	background: #fff;
	border-radius: 1rem;
	border: 0.0625rem solid rgba(27, 58, 91, .06);
	box-shadow: var(--mgp-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(.4rem);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	z-index: 60;
}
/* Pont invisible : la souris traverse l'espace entre le lien et le panneau sans le refermer */
.site-header .site-navigation ul.menu ul.sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1rem;
	height: 1rem;
}
.site-header .site-navigation ul.menu li:hover > ul.sub-menu,
.site-header .site-navigation ul.menu li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .18s ease, transform .18s ease;
}
.site-header .site-navigation ul.menu ul.sub-menu li { display: block; border: 0; }
.site-header .site-navigation ul.menu ul.sub-menu li a {
	display: block;
	padding: .6rem .85rem;
	border-radius: .65rem;
	font-size: .95rem;
	font-weight: 500;
	color: var(--mgp-ink);
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.site-header .site-navigation ul.menu ul.sub-menu li a::after { display: none; }
.site-header .site-navigation ul.menu ul.sub-menu li a:hover,
.site-header .site-navigation ul.menu ul.sub-menu li a:focus-visible,
.site-header .site-navigation ul.menu ul.sub-menu li.current-menu-item a {
	background: rgba(59, 169, 196, .1);
	color: var(--mgp-teal-2);
}
/* « Toutes nos prestations » : séparé des 4 pages */
.site-header .site-navigation ul.menu ul.sub-menu li:first-child { margin-bottom: .3rem; padding-bottom: .3rem; border-bottom: 0.0625rem solid rgba(27, 58, 91, .08); }
.site-header .site-navigation ul.menu ul.sub-menu li:first-child a { font-weight: 700; color: var(--mgp-navy); }

/* ---------- MENU MOBILE (dropdown du thème Hello) ----------
   Hello peint en gris foncé les liens « current-menu-item » (0,3,3) : ici tous
   les liens sont des ancres de l'accueil, donc tous « courants » → tout gris.
   D'où le préfixe .site-header et li.menu-item (0,4,3) pour passer devant. */
.site-header .site-navigation-toggle-holder { padding: 0; }
.site-header .site-navigation-toggle-holder .site-navigation-toggle {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: .8rem;
	background: rgba(27, 58, 91, .08);
	color: var(--mgp-navy);
	transition: background .2s ease;
}
.site-header .site-navigation-toggle-holder .site-navigation-toggle[aria-expanded="true"] {
	background: var(--mgp-navy);
	color: #fff;
}

/* Ouverture en fondu (Hello écrase le panneau en scaleY : texte déformé) */
.site-header .site-navigation-dropdown { margin-block-start: 0; }
.site-header .site-navigation-toggle-holder:not(.elementor-active) + .site-navigation-dropdown {
	transform: translateY(-.5rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.site-header .site-navigation-toggle-holder.elementor-active + .site-navigation-dropdown {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition: opacity .2s ease, transform .2s ease;
}

.site-header .site-navigation-dropdown ul.menu {
	padding: .5rem 1.5rem 1.5rem;
	background: #fff;
	border-radius: 0 0 var(--mgp-radius) var(--mgp-radius);
	box-shadow: var(--mgp-shadow-md);
}
/* Voile sur la page sous le menu (pas sur l'en-tête). Glissé sous les coins
   arrondis du panneau ; le toucher referme le menu (mgp.js). */
.site-header .site-navigation-dropdown ul.menu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - var(--mgp-radius));
	height: 100vh;
	z-index: -1;
	background: rgba(18, 41, 63, .35);
	pointer-events: none;
}
.site-header .site-navigation-dropdown ul.menu li.menu-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem .25rem;
	background: transparent;
	box-shadow: inset 0 -0.0625rem 0 rgba(27, 58, 91, .08);
	color: var(--mgp-navy);
	font-size: 1.08rem;
	font-weight: 600;
	transition: color .2s ease;
}
.site-header .site-navigation-dropdown ul.menu li.menu-item a::after {
	content: "›";
	color: var(--mgp-teal);
	font-size: 1.4rem;
	line-height: 1;
}
.site-header .site-navigation-dropdown ul.menu li.menu-item a:hover,
.site-header .site-navigation-dropdown ul.menu li.menu-item a:focus-visible { color: var(--mgp-teal-2); }

.site-header .site-navigation-dropdown ul.menu li.menu-cta a {
	justify-content: center;
	margin-top: 1.25rem;
	padding: 1rem;
	border-radius: 999rem;
	background: var(--mgp-grad);
	box-shadow: var(--mgp-shadow-sm);
	color: #fff;
	font-size: 1rem;
}
.site-header .site-navigation-dropdown ul.menu li.menu-cta a::after { content: none; }
.site-header .site-navigation-dropdown ul.menu li.menu-cta a:hover,
.site-header .site-navigation-dropdown ul.menu li.menu-cta a:focus-visible { color: #fff; opacity: .92; }

/* Sous-menu mobile : replié, déplié en touchant « Prestations »
   (Hello bascule .elementor-active sur le li parent ; mgp.js bloque la
   navigation vers l'ancre et tient aria-expanded à jour). */
.site-header .site-navigation-dropdown ul.menu li.menu-item-has-children > a::after {
	content: "";
	width: .5rem;
	height: .5rem;
	margin: 0 .2rem .25rem 0;
	border-right: .125rem solid var(--mgp-teal);
	border-bottom: .125rem solid var(--mgp-teal);
	transform: rotate(45deg);
	transition: transform .2s ease, margin .2s ease;
}
.site-header .site-navigation-dropdown ul.menu li.menu-item-has-children.elementor-active > a::after { transform: rotate(-135deg); margin-bottom: -.1rem; }
.site-header .site-navigation-dropdown ul.menu li.menu-item-has-children:not(.elementor-active) > ul.sub-menu { display: none; }
.site-header .site-navigation-dropdown ul.menu ul.sub-menu {
	position: static;
	margin: 0;
	padding: 0 0 .5rem .9rem;
	list-style: none;
	background: transparent;
	box-shadow: inset .125rem 0 0 rgba(59, 169, 196, .35);
}
.site-header .site-navigation-dropdown ul.menu ul.sub-menu li.menu-item a {
	padding: .75rem .25rem .75rem .6rem;
	font-size: .98rem;
	font-weight: 500;
	color: var(--mgp-ink);
}

@media (prefers-reduced-motion: reduce) {
	.site-header .site-navigation-toggle-holder + .site-navigation-dropdown { transition: none !important; }
}

/* Footer du thème masqué : le footer réel est une section de la page */
.site-footer.dynamic-footer { display: none; }

/* ---------- Coquille centrée (= .container de la maquette) ---------- */
.mgp-page .mgp-shell > .e-con-inner {
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	padding-block: 0;
	display: block;
	width: 100%;
}
.mgp-page .mgp-shell { padding: 0; }

/* Conteneurs en flux normal : les marges des enfants font foi.
   Pas de reset de marge ici : Elementor zéroute déjà margin-block-end des widgets
   via « .e-con .elementor-widget.elementor-widget » (0,3,0). Les marges voulues
   sont (re)posées plus bas dans le bloc « Marges » avec la spécificité qu'il faut. */
.mgp-page .mgp-flow { display: block; }

/* ---------- Atomes ---------- */
.mgp-page .mgp-eyebrow {
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .78rem;
	color: var(--mgp-teal-2);
}
.mgp-page .mgp-h2 h2 {
	font-size: clamp(1.8rem, 4vw, 2.9rem);
	font-weight: 800;
	color: var(--mgp-navy);
	letter-spacing: -.01em;
}
.mgp-page .mgp-lead {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: var(--mgp-muted);
	max-width: 46rem;
}
.mgp-page .mgp-lead-center { margin-inline: auto; }
.mgp-page .mgp-center-block { text-align: center; }
.mgp-page .mgp-center-block .mgp-reviews { text-align: left; }

/* Boutons */
.mgp-page .mgp-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-weight: 600;
	font-size: 1rem;
	padding: .9em 1.6em;
	border-radius: 999rem;
	border: 0;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mgp-page .mgp-btn-primary .elementor-button {
	background: var(--mgp-grad);
	color: #fff;
	box-shadow: var(--mgp-shadow-sm);
}
.mgp-page .mgp-btn-primary .elementor-button:hover {
	transform: translateY(-0.125rem);
	box-shadow: var(--mgp-shadow-md);
}
.mgp-page .mgp-btn-ghost .elementor-button {
	background: transparent;
	color: var(--mgp-navy);
	border: 0.125rem solid rgba(27, 58, 91, .2);
}
.mgp-page .mgp-btn-ghost .elementor-button:hover {
	border-color: var(--mgp-teal);
	color: var(--mgp-teal-2);
}

/* ---------- HERO ---------- */
.mgp-page .mgp-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 80% 0%, rgba(59, 169, 196, .18), transparent 60%),
		var(--mgp-cream);
	padding: 0;
}
.mgp-page .mgp-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding: clamp(3rem, 7vw, 6rem) 0;
	width: 100%;
}
.mgp-page .mgp-hero-text { display: block; padding: 0; }
.mgp-page .mgp-hero-title h1 {
	font-size: clamp(2.1rem, 5.2vw, 4rem);
	font-weight: 800;
	color: var(--mgp-navy);
	letter-spacing: -.01em;
}
.mgp-page .mgp-hero-title em {
	font-style: normal;
	background: var(--mgp-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.mgp-page .mgp-hero-lead {
	font-size: clamp(1.02rem, 1.5vw, 1.22rem);
	color: var(--mgp-muted);
	max-width: 34rem;
	margin-top: 1.25rem;
}
.mgp-page .mgp-hero-cta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .9rem;
	align-items: center;
	justify-content: flex-start;
	margin-top: 2rem;
	padding: 0;
	width: auto;
}
.mgp-page .mgp-hero-cta > .elementor-element { width: auto; }
.mgp-page .mgp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 2.2rem;
}
.mgp-page .mgp-chip {
	font-weight: 500;
	font-size: .82rem;
	background: #fff;
	color: var(--mgp-navy);
	padding: .5em 1em;
	border-radius: 999rem;
	box-shadow: var(--mgp-shadow-sm);
	display: inline-flex;
	gap: .4rem;
	align-items: center;
}
.mgp-page .mgp-hero-visual {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3.4;
	border-radius: var(--mgp-radius);
	overflow: hidden;
	box-shadow: var(--mgp-shadow-md);
	padding: 0;
}
.mgp-page .mgp-hero-visual > .mgp-hero-img,
.mgp-page .mgp-hero-visual .mgp-hero-img > .elementor-widget-container,
.mgp-page .mgp-hero-visual .mgp-hero-img figure,
.mgp-page .mgp-hero-visual .mgp-hero-img a { height: 100%; width: 100%; margin: 0; display: block; }
.mgp-page .mgp-hero-visual .mgp-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}
.mgp-page .mgp-hero-float {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(0.375rem);
	backdrop-filter: blur(0.375rem);
	border-radius: 1rem;
	padding: .9rem 1.1rem;
	box-shadow: var(--mgp-shadow-md);
	display: flex;
	gap: .7rem;
	align-items: center;
	max-width: 17rem;
	z-index: 2;
	line-height: 1.3; /* l'interligne du texte courant (~1.7) étirait le cartouche */
}
.mgp-page .mgp-hero-float .ico {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: .7rem;
	background: var(--mgp-grad);
	color: #fff;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.mgp-page .mgp-hero-float b { color: var(--mgp-navy); font-size: .95rem; display: block; line-height: 1.25; }
.mgp-page .mgp-hero-float small { color: var(--mgp-muted); font-size: .78rem; display: block; line-height: 1.35; margin-top: .2rem; }

/* ---------- BANDEAU CHIFFRES ---------- */
.mgp-page .mgp-strip { background: var(--mgp-navy); color: #fff; padding: 0; }
.mgp-page .mgp-strip-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	padding: clamp(1.8rem, 4vw, 2.6rem) 0;
	text-align: center;
	width: 100%;
}
.mgp-page .mgp-stat { display: block; padding: 0; }
/* Chiffres clés : balise <p> (un chiffre n'est pas un titre de section) */
.mgp-page .mgp-n .elementor-heading-title {
	margin: 0;
	line-height: 1.2;
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	color: var(--mgp-teal);
}
.mgp-page .mgp-l { font-size: .9rem; color: rgba(255, 255, 255, .75); margin-top: .2rem; }

/* ---------- SECTIONS ---------- */
.mgp-page .mgp-about, .mgp-page .mgp-presta, .mgp-page .mgp-trust, .mgp-page .mgp-contact { padding: 0; }
.mgp-page .mgp-section-pad { padding: clamp(3.5rem, 8vw, 6.5rem) 0; width: 100%; }
.mgp-page .mgp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	width: 100%;
	padding: 0;
}
.mgp-page .mgp-about-text { display: block; padding: 0; }
.mgp-page .mgp-about-p { color: var(--mgp-muted); max-width: 38rem; margin-top: 1rem; }

/* Galerie 2 photos */
.mgp-page .mgp-gallery-2 {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 1rem;
	width: 100%;
	align-items: stretch;
	padding: 0;
}
.mgp-page .mgp-ph {
	display: block;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: var(--mgp-shadow-sm);
	position: relative;
	background: linear-gradient(135deg, #dfe7ea, #cdd9dd);
	padding: 0;
	aspect-ratio: 3 / 4;
}
.mgp-page .mgp-ph:last-child { aspect-ratio: auto; }
.mgp-page .mgp-ph > .mgp-ph-img,
.mgp-page .mgp-ph .mgp-ph-img > .elementor-widget-container,
.mgp-page .mgp-ph .mgp-ph-img figure,
.mgp-page .mgp-ph .mgp-ph-img a { height: 100%; width: 100%; margin: 0; display: block; }
.mgp-page .mgp-ph .mgp-ph-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
/* Photo d'équipe : les visages sont dans le haut de l'image → recadrage calé en
   haut, sinon ils sont coupés dès que le cadre est moins haut que la photo. */
.mgp-page .mgp-ph:first-child .mgp-ph-img img { object-position: 50% 12%; }
.mgp-page .mgp-ph-label {
	position: absolute;
	inset: auto 0 0 0;
	padding: .6rem .8rem;
	font-size: .78rem;
	color: #fff;
	background: linear-gradient(transparent, rgba(18, 41, 63, .75));
	z-index: 2;
}

/* ---------- ÉQUIPE ---------- */
.mgp-page .mgp-team {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	width: 100%;
	align-items: stretch;
	margin-top: 2.5rem;
	padding: 0;
}
.mgp-page .mgp-member {
	display: block;
	background: #fff;
	border-radius: var(--mgp-radius);
	padding: 1.6rem;
	box-shadow: var(--mgp-shadow-sm);
	border: 0.0625rem solid rgba(27, 58, 91, .06);
}
.mgp-page .mgp-member-name h3 { color: var(--mgp-navy); font-size: 1.2rem; font-weight: 700; }
.mgp-page .mgp-role { color: var(--mgp-teal-2); font-weight: 600; font-size: .9rem; margin-bottom: .7rem; }
.mgp-page .mgp-member-desc { color: var(--mgp-muted); font-size: .95rem; }
.mgp-page .mgp-certs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.mgp-page .mgp-cert {
	font-size: .72rem;
	font-weight: 500;
	background: var(--mgp-cream);
	color: var(--mgp-navy);
	padding: .35em .7em;
	border-radius: .55rem;
	display: inline-block;
}

/* Qualifications Qualifelec (sous les 2 profils) : texte + 3 badges légendés */
.mgp-page .mgp-quals {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	width: 100%;
	padding: clamp(1.6rem, 3vw, 2.2rem);
	background: #fff;
	border-radius: var(--mgp-radius);
	box-shadow: var(--mgp-shadow-sm);
	border: 0.0625rem solid rgba(27, 58, 91, .06);
}
.mgp-page .mgp-quals-text { display: block; padding: 0; }
.mgp-page .mgp-quals-title h3 { color: var(--mgp-navy); font-size: 1.35rem; font-weight: 800; }
.mgp-page .mgp-quals-desc { color: var(--mgp-muted); font-size: .95rem; }
.mgp-page .mgp-quals-desc p { margin: 0; }
.mgp-page .mgp-quals-logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	align-items: start;
	padding: 0;
}
.mgp-page .mgp-qual { display: block; padding: 0; text-align: center; }
.mgp-page .mgp-qual .mgp-qual-img img {
	display: block;
	width: auto;
	height: clamp(5.5rem, 10vw, 7.5rem);
	margin-inline: auto;
	object-fit: contain;
}
.mgp-page .mgp-qual-l { color: var(--mgp-navy); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.mgp-page .mgp-qual-l p { margin: 0; }

/* ---------- PRESTATIONS / ONGLETS ---------- */
.mgp-page .mgp-presta { background: var(--mgp-cream); }
.mgp-page .mgp-center { text-align: center; max-width: 44rem; margin-inline: auto; width: 100%; display: block; padding: 0; }
.mgp-page .mgp-center .mgp-lead { margin-inline: auto; }

/* Nav en pastilles, à toutes les tailles comme la maquette (Elementor la masque
   sous 768px au profit d'un accordéon : on garde les pastilles + le panneau). */
.mgp-page .elementor-widget-tabs .elementor-tabs-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	border: 0;
	overflow: visible;
}
/* Les titres « mobile » d'Elementor doivent rester masqués : ne jamais leur
   appliquer de display, sinon ils doublent la nav sur desktop. */
.mgp-page .elementor-widget-tabs .elementor-tab-mobile-title { display: none; }

/* Bordures : neutralisées à la source via le réglage « border_width: 0rem » du
   widget (son défaut est 1px, et Elementor l'écrit dans post-17.css en 0,4,0 —
   impossible à battre depuis ici). Ne pas remettre de border-width ci-dessous. */
.mgp-page .elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title {
	font-weight: 600;
	font-size: .98rem;
	padding: .75em 1.4em;
	border-radius: 999rem;
	border-style: none;
	background-color: #fff;
	color: var(--mgp-navy);
	box-shadow: var(--mgp-shadow-sm);
	transition: color .2s ease;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	width: auto;
	line-height: 1.2;
}
.mgp-page .elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title:hover { color: var(--mgp-teal-2); }
.mgp-page .elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active {
	background-color: transparent;
	background-image: var(--mgp-grad);
	color: #fff;
	border-style: none;
}
/* Traits de liaison décoratifs d'Elementor autour de l'onglet actif : absents de
   la maquette, et larges de 999em — sans overflow:hidden sur la nav ils créent un
   scroll horizontal de ~16000px. Il faut 0,4,0 (donc « .elementor-active ») pour
   passer devant la règle d'Elementor, sinon elle gagne (widget-tabs.min.css est
   chargé après cette feuille). */
.mgp-page .elementor-widget-tabs .elementor-tab-desktop-title.elementor-active:before,
.mgp-page .elementor-widget-tabs .elementor-tab-desktop-title.elementor-active:after { display: none; }
.mgp-page .elementor-widget-tabs .elementor-tabs-content-wrapper { border: 0; }
.mgp-page .elementor-widget-tabs .elementor-tab-content {
	padding: 0;
	border: 0;
	margin-top: 2rem;
	background: #fff;
	border-radius: var(--mgp-radius);
	box-shadow: var(--mgp-shadow-md);
	overflow: hidden;
	animation: mgp-fade .4s ease;
}
@keyframes mgp-fade {
	from { opacity: 0; transform: translateY(0.625rem); }
	to { opacity: 1; transform: none; }
}
.mgp-page .mgp-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; text-align: left; }
.mgp-page .mgp-panel-body { padding: clamp(1.8rem, 4vw, 3rem); }
.mgp-page .mgp-panel-body h3 {
	color: var(--mgp-navy);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	margin-bottom: 1rem;
	font-weight: 800;
}
.mgp-page .mgp-panel-body > p { color: var(--mgp-muted); margin-bottom: 1.4rem; }
.mgp-page .mgp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.mgp-page .mgp-cols h4 {
	font-size: .92rem;
	color: var(--mgp-teal-2);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: .6rem;
	font-weight: 700;
}
.mgp-page .mgp-check { list-style: none; display: grid; gap: .5rem; padding: 0; margin: 0; }
.mgp-page .mgp-check li {
	position: relative;
	padding-left: 1.6rem;
	font-size: .95rem;
	color: var(--mgp-ink);
	list-style: none;
}
.mgp-page .mgp-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--mgp-grad);
}
.mgp-page .mgp-panel-visual {
	min-height: 100%;
	background: linear-gradient(135deg, #dfe7ea, #cdd9dd);
	position: relative;
}
.mgp-page .mgp-panel-visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Carrousel de l'onglet ([mgp_carousel], images gérées dans l'admin « Carrousels »).
   Fondu enchaîné : les diapositives sont empilées, seule .is-active est opaque. */
.mgp-page .mgp-carousel { position: absolute; inset: 0; overflow: hidden; }
.mgp-page .mgp-carousel .mgp-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.mgp-page .mgp-carousel .mgp-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease;
}
.mgp-page .mgp-carousel .mgp-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--mgp-navy);
	font-size: 1.7rem;
	line-height: 1;
	box-shadow: var(--mgp-shadow-sm);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.mgp-page .mgp-carousel .mgp-carousel-btn span { margin-top: -.15em; }
.mgp-page .mgp-carousel .mgp-carousel-prev { left: .9rem; }
.mgp-page .mgp-carousel .mgp-carousel-next { right: .9rem; }
.mgp-page .mgp-carousel .mgp-carousel-btn:hover,
.mgp-page .mgp-carousel .mgp-carousel-btn:focus-visible {
	background: var(--mgp-navy);
	color: #fff;
}
.mgp-page .mgp-carousel .mgp-carousel-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1rem;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: .5rem;
}
.mgp-page .mgp-carousel .mgp-carousel-dot {
	width: .7rem;
	height: .7rem;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	box-shadow: 0 0 .4rem rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.mgp-page .mgp-carousel .mgp-carousel-dot:hover { background: rgba(255, 255, 255, .7); }
.mgp-page .mgp-carousel .mgp-carousel-dot.is-active { background: #fff; transform: scale(1.2); }
.mgp-page .mgp-carousel .mgp-carousel-btn:focus-visible,
.mgp-page .mgp-carousel .mgp-carousel-dot:focus-visible {
	outline: 2px solid var(--mgp-teal);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.mgp-page .mgp-carousel .mgp-slide,
	.mgp-page .mgp-carousel .mgp-slide.is-active { transition: none; }
}

/* ---------- AVIS ---------- */
.mgp-page .mgp-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	text-align: left;
	width: 100%;
	align-items: stretch;
	margin-top: 2.5rem;
	padding: 0;
}
.mgp-page .mgp-review {
	display: block;
	background: #fff;
	border-radius: var(--mgp-radius);
	padding: 1.7rem;
	box-shadow: var(--mgp-shadow-sm);
	border: 0.0625rem solid rgba(27, 58, 91, .06);
}
.mgp-page .mgp-stars { color: #F5B301; font-size: 1.05rem; letter-spacing: .1em; margin-bottom: .8rem; }
.mgp-page .mgp-review-text { color: var(--mgp-ink); font-size: .97rem; }
.mgp-page .mgp-who { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; }
.mgp-page .mgp-avatar {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--mgp-grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 600;
	flex: 0 0 auto;
}
.mgp-page .mgp-who b { color: var(--mgp-navy); font-size: .95rem; display: block; }
.mgp-page .mgp-who small { color: var(--mgp-muted); }

/* ---------- AVIS GOOGLE (widget Trustindex) ----------
   Remplace les anciennes cartes .mgp-review. Le widget apporte son propre style ;
   on se contente de le poser dans le rythme de la section et de neutraliser
   l'alignement centré hérité de .mgp-center-block. */
.mgp-page .mgp-google-reviews {
	display: block;
	width: 100%;
	margin-top: 2.5rem;
	padding: 0;
	text-align: left;
}
.mgp-page .mgp-google-reviews .ti-widget { margin: 0 auto; }

/* ---------- CONTACT ---------- */
.mgp-page .mgp-contact { background: var(--mgp-navy); color: #fff; }
.mgp-page .mgp-contact .mgp-h2 h2 { color: #fff; }
.mgp-page .mgp-contact .mgp-eyebrow { color: var(--mgp-teal); }
.mgp-page .mgp-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
	width: 100%;
	padding: 0;
}
.mgp-page .mgp-contact-info { display: block; padding: 0; }
.mgp-page .mgp-contact-lead { color: rgba(255, 255, 255, .8); max-width: 30rem; margin-top: 1rem; }
.mgp-page .mgp-info-list { display: grid; gap: 1rem; margin-top: 1.8rem; }
.mgp-page .mgp-info-item { display: flex; gap: .9rem; align-items: center; }
.mgp-page .mgp-info-item .ico {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: .8rem;
	background: rgba(255, 255, 255, .1);
	display: grid;
	place-items: center;
	color: var(--mgp-teal);
	flex: 0 0 auto;
}
.mgp-page .mgp-info-item b { font-size: 1rem; color: #fff; display: block; }
.mgp-page .mgp-info-item small { color: rgba(255, 255, 255, .65); display: block; font-size: .82rem; }
.mgp-page .mgp-info-item a { color: rgba(255, 255, 255, .65); }
.mgp-page .mgp-info-item a:hover { color: var(--mgp-teal); }
.mgp-page .mgp-socials { display: flex; gap: .7rem; margin-top: 1.8rem; }
.mgp-page .mgp-socials a {
	width: 2.7rem;
	height: 2.7rem;
	border-radius: .8rem;
	background: rgba(255, 255, 255, .1);
	display: grid;
	place-items: center;
	color: #fff;
	transition: background .2s ease, transform .2s ease;
}
.mgp-page .mgp-socials a:hover { background: var(--mgp-teal); transform: translateY(-0.125rem); }
.mgp-page .mgp-socials svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* Formulaire — carte blanche.
   La section contact impose « color: #fff » (fond marine) : on le rétablit ici,
   sinon tout texte non coloré explicitement dans la carte est blanc sur blanc
   (c'était le cas des messages de CF7). */
.mgp-page .mgp-form-card {
	display: block;
	background: #fff;
	color: var(--mgp-ink);
	border-radius: var(--mgp-radius);
	padding: clamp(1.6rem, 4vw, 2.4rem);
	box-shadow: var(--mgp-shadow-md);
}
.mgp-page .mgp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mgp-page .mgp-field { margin-bottom: 1rem; }
.mgp-page .mgp-field label {
	display: block;
	font-weight: 500;
	font-size: .85rem;
	color: var(--mgp-navy);
	margin-bottom: .35rem;
}
.mgp-page .mgp-form-card input[type="text"],
.mgp-page .mgp-form-card input[type="email"],
.mgp-page .mgp-form-card input[type="tel"],
.mgp-page .mgp-form-card select,
.mgp-page .mgp-form-card textarea {
	width: 100%;
	padding: .8em 1em;
	border: 0.09375rem solid rgba(27, 58, 91, .15);
	border-radius: .7rem;
	font-family: inherit;
	font-size: .95rem;
	color: var(--mgp-ink);
	background: var(--mgp-cream-2);
	transition: border-color .2s ease, background .2s ease;
}
.mgp-page .mgp-form-card input:focus,
.mgp-page .mgp-form-card select:focus,
.mgp-page .mgp-form-card textarea:focus {
	outline: none;
	border-color: var(--mgp-teal);
	background: #fff;
}
.mgp-page .mgp-form-card textarea { resize: vertical; height: 6.5rem; min-height: 6.5rem; }
.mgp-page .mgp-consent { margin-top: .2rem; }
.mgp-page .mgp-form-card .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.mgp-page .mgp-form-card .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: .8rem;
	color: var(--mgp-muted);
}
.mgp-page .mgp-form-card .wpcf7-acceptance a { color: var(--mgp-teal-2); text-decoration: underline; }
.mgp-page .mgp-form-card input[type="submit"] {
	width: 100%;
	margin-top: .4rem;
	font-family: inherit;
	font-weight: 600;
	font-size: 1rem;
	padding: .9em 1.6em;
	border: 0;
	border-radius: 999rem;
	background: var(--mgp-grad);
	color: #fff;
	box-shadow: var(--mgp-shadow-sm);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mgp-page .mgp-form-card input[type="submit"]:hover {
	transform: translateY(-0.125rem);
	box-shadow: var(--mgp-shadow-md);
}
.mgp-page .mgp-form-card .wpcf7-not-valid-tip { color: #C0392B; font-size: .8rem; margin-top: .25rem; }
.mgp-page .mgp-form-card input[aria-invalid="true"],
.mgp-page .mgp-form-card select[aria-invalid="true"],
.mgp-page .mgp-form-card textarea[aria-invalid="true"] { border-color: #C0392B; }

/* Messages CF7 : un état = une couleur, sur fond teinté lisible dans la carte. */
.mgp-page .mgp-form-card .wpcf7-response-output {
	border-radius: .7rem;
	margin: 1rem 0 0;
	padding: .8em 1.1em;
	font-size: .9rem;
	border-width: 0.09375rem;
	border-style: solid;
}
/* Erreurs de saisie */
.mgp-page .mgp-form-card form.invalid .wpcf7-response-output,
.mgp-page .mgp-form-card form.unaccepted .wpcf7-response-output,
.mgp-page .mgp-form-card form.payment-required .wpcf7-response-output {
	color: #7A5B00;
	background: #FFF3CD;
	border-color: #FFB900;
}
/* Envoi réussi */
.mgp-page .mgp-form-card form.sent .wpcf7-response-output {
	color: #1B5E20;
	background: #E6F4EA;
	border-color: #46B450;
}
/* Échec d'envoi / spam */
.mgp-page .mgp-form-card form.failed .wpcf7-response-output,
.mgp-page .mgp-form-card form.aborted .wpcf7-response-output,
.mgp-page .mgp-form-card form.spam .wpcf7-response-output {
	color: #8B1F1F;
	background: #FDECEA;
	border-color: #DC3232;
}

/* ---------- FOOTER (section de page) ---------- */
.mgp-page .mgp-footer { background: var(--mgp-navy-2); color: rgba(255, 255, 255, .7); padding: 0; }
.mgp-page .mgp-foot-pad { padding: 2.5rem 0 1.6rem; width: 100%; display: block; }
.mgp-page .mgp-foot-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
	gap: 2rem;
	width: 100%;
	padding: 0;
}
.mgp-page .mgp-foot-brand, .mgp-page .mgp-foot-col { display: block; padding: 0; }
.mgp-page .mgp-foot-h h4 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: .9rem; }
.mgp-page .mgp-foot-desc { font-size: .9rem; max-width: 22rem; color: rgba(255, 255, 255, .7); margin-top: 1rem; }
.mgp-page .mgp-foot-links a,
.mgp-page .mgp-foot-links span {
	display: block;
	color: rgba(255, 255, 255, .7);
	font-size: .92rem;
	padding-block: .25rem;
}
.mgp-page .mgp-foot-links a:hover { color: var(--mgp-teal); }
.mgp-page .mgp-foot-bottom {
	border-top: 0.0625rem solid rgba(255, 255, 255, .12);
	margin-top: 2rem;
	padding-top: 1.4rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
	font-size: .85rem;
	width: 100%;
	color: rgba(255, 255, 255, .7);
}
.mgp-page .mgp-foot-bottom a { color: rgba(255, 255, 255, .7); }
.mgp-page .mgp-foot-bottom a:hover { color: var(--mgp-teal); }
.mgp-page .mgp-foot-logo img { height: 2.6rem; width: auto; }

/* ---------- MARGES (rythme vertical de la maquette) ----------
   Elementor pose « .e-con .elementor-widget.elementor-widget { margin-block-end: 0 } »
   (spécificité 0,3,0) : les marges des widgets doivent donc être déclarées à 0,4,0
   pour passer devant. Les conteneurs, eux, ne sont pas ciblés par cette règle. */

/* Widgets */
.mgp-page .e-con .elementor-widget.mgp-eyebrow { margin-bottom: .75rem; }
.mgp-page .e-con .elementor-widget.mgp-h2 { margin-bottom: 1rem; }
.mgp-page .e-con .elementor-widget.mgp-hero-lead { margin-top: 1.25rem; }
.mgp-page .e-con .elementor-widget.mgp-l { margin-top: .2rem; }
.mgp-page .e-con .elementor-widget.mgp-about-p { margin-top: 1rem; }
.mgp-page .e-con .elementor-widget.mgp-role { margin-bottom: .7rem; }
.mgp-page .e-con .elementor-widget.mgp-contact-lead { margin-top: 1rem; }
.mgp-page .e-con .elementor-widget.mgp-foot-desc { margin-top: 1rem; }
.mgp-page .e-con .elementor-widget.mgp-tabs-wrap { margin-top: 2.5rem; }

/* Conteneurs */
.mgp-page .e-con.mgp-hero-cta { margin-top: 2rem; }
.mgp-page .e-con.mgp-team { margin-top: 2.5rem; }
.mgp-page .e-con.mgp-quals { margin-top: 1.5rem; }
.mgp-page .e-con .elementor-widget.mgp-quals-title { margin-bottom: .6rem; }
.mgp-page .e-con .elementor-widget.mgp-qual-l { margin-top: .7rem; }
.mgp-page .e-con.mgp-reviews { margin-top: 2.5rem; }

/* ---------- PAGES LÉGALES (mentions, confidentialité) ---------- */
.mgp-legal .site-main,
.mgp-legal .page-content {
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.mgp-legal .page-header { max-width: 48rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.mgp-legal .entry-title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	color: var(--mgp-navy);
	letter-spacing: -.01em;
	margin-bottom: 1rem;
}
.mgp-legal h2 {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	color: var(--mgp-navy);
	margin-top: 2.5rem;
	margin-bottom: .8rem;
}
.mgp-legal h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mgp-teal-2);
	margin-top: 1.6rem;
	margin-bottom: .5rem;
}
.mgp-legal .site-main p, .mgp-legal .site-main li { color: var(--mgp-muted); }
.mgp-legal .site-main p { margin-bottom: 1rem; }
.mgp-legal .site-main strong { color: var(--mgp-ink); }
.mgp-legal .site-main ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.mgp-legal .site-main li { margin-bottom: .5rem; }
/* Souligné réservé au corps de texte : ne doit pas atteindre le menu du header. */
.mgp-legal .site-main a { color: var(--mgp-teal-2); text-decoration: underline; }
.mgp-legal .site-main a:hover { color: var(--mgp-teal); }

.mgp-legal .mgp-legal-intro {
	font-size: 1.05rem;
	background: var(--mgp-cream);
	border-left: 0.1875rem solid var(--mgp-teal);
	border-radius: 0 .75rem .75rem 0;
	padding: 1rem 1.25rem;
}

/* Les mentions « [À COMPLÉTER : … ] » doivent sauter aux yeux tant qu'elles sont là */
.mgp-legal .site-main .mgp-todo {
	background: #FFF3CD;
	color: #7A5B00;
	border-radius: .3rem;
	padding: .1em .4em;
	font-style: normal;
}

.mgp-legal-footer {
	background: var(--mgp-navy-2);
	color: rgba(255, 255, 255, .7);
	padding-block: 2rem;
	font-size: .85rem;
}
.mgp-legal-footer-inner {
	max-width: 48rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
}
.mgp-legal-footer p { margin: 0; }
.mgp-legal-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.mgp-legal-footer a:hover { color: var(--mgp-teal); }

@media (max-width: 35rem) {
	.mgp-legal-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Blocs communs (Contact, Pied de page) insérés via [mgp_block] : le conteneur
   porteur et le widget Shortcode doivent être transparents. */
.mgp-page .e-con.mgp-block { padding: 0; --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; }
.mgp-page .e-con.mgp-block > .elementor-widget,
.mgp-page .e-con.mgp-block > .e-con-inner > .elementor-widget { width: 100%; }

/* ---------- PAGES PRESTATIONS / RÉALISATIONS / FAQ (body.mgp-subpage) ---------- */
.mgp-page .mgp-crumbs { font-size: .85rem; color: var(--mgp-muted); }
.mgp-page .mgp-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.mgp-page .mgp-crumbs li + li::before { content: "›"; margin-right: .4rem; color: var(--mgp-teal); }
.mgp-page .mgp-crumbs a { color: var(--mgp-teal-2); text-decoration: none; }
.mgp-page .mgp-crumbs a:hover { text-decoration: underline; }
.mgp-page .mgp-hero-page .mgp-hero-grid { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mgp-page .mgp-hero-page .mgp-hero-title h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); }

.mgp-page .mgp-sec { background: #fff; padding: 0; }
.mgp-page .mgp-sec-cream { background: var(--mgp-cream); padding: 0; }
.mgp-page .mgp-sec-head { display: block; padding: 0; max-width: 46rem; }
.mgp-page .mgp-sec-head.mgp-center { max-width: 44rem; }

/* Intro : texte + encadré « pour qui » */
.mgp-page .mgp-intro {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	width: 100%;
	padding: 0;
}
.mgp-page .mgp-prose { color: var(--mgp-muted); font-size: 1.02rem; line-height: 1.7; }
.mgp-page .mgp-prose p { margin: 0 0 1rem; }
.mgp-page .mgp-prose p:last-child { margin-bottom: 0; }
.mgp-page .mgp-prose strong { color: var(--mgp-navy); }
.mgp-page .mgp-aside {
	background: var(--mgp-cream-2);
	border-radius: var(--mgp-radius);
	padding: clamp(1.4rem, 3vw, 2rem);
	border: 0.0625rem solid rgba(27, 58, 91, .06);
}
.mgp-page .mgp-aside h3 { color: var(--mgp-navy); font-size: 1.1rem; font-weight: 700; margin: 0 0 .9rem; }

/* Carte de prestations (2 ou 3 listes à puces rondes, cf. .mgp-check) */
.mgp-page .mgp-card-panel {
	background: #fff;
	border-radius: var(--mgp-radius);
	box-shadow: var(--mgp-shadow-md);
	padding: clamp(1.6rem, 4vw, 2.6rem);
	text-align: left;
}
.mgp-page .mgp-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.mgp-page .mgp-cols-3 h4 {
	font-size: .92rem;
	color: var(--mgp-teal-2);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: .6rem;
	font-weight: 700;
}

/* Étapes numérotées */
.mgp-page .mgp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mgp-step;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.2rem;
	text-align: left;
}
.mgp-page .mgp-steps li {
	counter-increment: mgp-step;
	background: #fff;
	border-radius: var(--mgp-radius);
	padding: 1.4rem 1.3rem;
	box-shadow: var(--mgp-shadow-sm);
	border: 0.0625rem solid rgba(27, 58, 91, .06);
}
.mgp-page .mgp-steps li::before {
	content: counter(mgp-step);
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: var(--mgp-grad);
	color: #fff;
	font-weight: 800;
	margin-bottom: .9rem;
}
.mgp-page .mgp-steps b { display: block; color: var(--mgp-navy); font-size: 1rem; margin-bottom: .35rem; }
.mgp-page .mgp-steps span { color: var(--mgp-muted); font-size: .92rem; line-height: 1.55; }

/* Arguments */
.mgp-page .mgp-why {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
	text-align: left;
}
.mgp-page .mgp-why-item {
	background: #fff;
	border-radius: var(--mgp-radius);
	padding: 1.5rem;
	box-shadow: var(--mgp-shadow-sm);
	border: 0.0625rem solid rgba(27, 58, 91, .06);
}
.mgp-page .mgp-why-item .ico { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: .8rem; }
.mgp-page .mgp-why-item b { display: block; color: var(--mgp-navy); font-size: 1.02rem; margin-bottom: .4rem; }
.mgp-page .mgp-why-item span { color: var(--mgp-muted); font-size: .93rem; line-height: 1.55; display: block; }

/* Page Contact : cartes de coordonnées (liens d'appel, e-mail, itinéraire) */
.mgp-page .mgp-contact-cards .mgp-why-item a {
	display: block;
	margin-top: .3rem;
	color: var(--mgp-teal-2);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.mgp-page .mgp-contact-cards .mgp-why-item a:hover { color: var(--mgp-navy); text-decoration: underline; }
.mgp-page .mgp-contact-cards .mgp-why-item a:first-child { margin-top: 0; }

/* Galerie de photos (widgets Image, ouverture en visionneuse Elementor) */
.mgp-page .mgp-gal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
	width: 100%;
	padding: 0;
}
.mgp-page .mgp-gal > .elementor-widget { width: 100%; }
.mgp-page .mgp-gal .elementor-widget-image a,
.mgp-page .mgp-gal .elementor-widget-image figure { display: block; margin: 0; }
.mgp-page .mgp-gal .elementor-widget-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
	box-shadow: var(--mgp-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}
.mgp-page .mgp-gal .elementor-widget-image a:hover img { transform: translateY(-0.2rem); box-shadow: var(--mgp-shadow-md); }
.mgp-page .mgp-gal-title h2 { color: var(--mgp-navy); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; }

/* FAQ (<details> natif : accessible, sans JS) */
.mgp-page .mgp-faq { display: grid; gap: .8rem; text-align: left; max-width: 52rem; margin-inline: auto; }
.mgp-page .mgp-faq details {
	background: #fff;
	border-radius: 1rem;
	border: 0.0625rem solid rgba(27, 58, 91, .08);
	box-shadow: var(--mgp-shadow-sm);
}
.mgp-page .mgp-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	color: var(--mgp-navy);
	font-weight: 700;
	font-size: 1.02rem;
}
.mgp-page .mgp-faq summary::-webkit-details-marker { display: none; }
/* « + » dessiné (deux barres centrées) : le glyphe texte suivait la ligne de
   base de la police et tombait décentré dans le rond. Pivote en « × » ouvert. */
.mgp-page .mgp-faq summary::after {
	content: "";
	flex: none;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background:
		linear-gradient(var(--mgp-teal-2), var(--mgp-teal-2)) center / .75rem .125rem no-repeat,
		linear-gradient(var(--mgp-teal-2), var(--mgp-teal-2)) center / .125rem .75rem no-repeat,
		rgba(59, 169, 196, .12);
	transition: transform .2s ease;
}
.mgp-page .mgp-faq details[open] summary::after { transform: rotate(45deg); }
.mgp-page .mgp-faq summary:focus-visible { outline: 2px solid var(--mgp-teal); outline-offset: 2px; border-radius: 1rem; }
.mgp-page .mgp-faq .mgp-faq-a { padding: 0 1.3rem 1.2rem; color: var(--mgp-muted); line-height: 1.65; }
.mgp-page .mgp-faq .mgp-faq-a p { margin: 0; }
.mgp-page .mgp-faq-wrap { max-width: 52rem; width: 100%; margin-inline: auto; padding: 0; }
.mgp-page .mgp-faq-group h2 { color: var(--mgp-navy); font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 800; }
.mgp-page .e-con .elementor-widget.mgp-faq-group { margin: 2.4rem 0 1rem; }
.mgp-page .e-con .elementor-widget.mgp-faq-group:first-child { margin-top: 0; }

/* Zone d'intervention */
.mgp-page .mgp-zone {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--mgp-cream-2);
	border-radius: var(--mgp-radius);
	padding: 1.4rem 1.6rem;
	color: var(--mgp-muted);
	text-align: left;
	border: 0.0625rem solid rgba(27, 58, 91, .06);
}
.mgp-page .mgp-zone .ico { font-size: 1.5rem; line-height: 1; }
.mgp-page .mgp-zone b { color: var(--mgp-navy); display: block; margin-bottom: .25rem; }

/* Autres prestations */
.mgp-page .mgp-related {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
}
.mgp-page .mgp-related a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: 1.1rem 1.3rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: var(--mgp-shadow-sm);
	border: 0.0625rem solid rgba(27, 58, 91, .06);
	color: var(--mgp-navy);
	font-weight: 700;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.mgp-page .mgp-related a::after { content: "→"; color: var(--mgp-teal); }
.mgp-page .mgp-related a:hover { transform: translateY(-0.15rem); box-shadow: var(--mgp-shadow-md); color: var(--mgp-teal-2); }

/* Lien « En savoir plus » dans les onglets de l'accueil */
.mgp-page .mgp-more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1.4rem;
	font-weight: 700;
	color: var(--mgp-teal-2);
	text-decoration: none;
}
.mgp-page .mgp-more:hover { color: var(--mgp-navy); }

/* Marges des nouveaux blocs (cf. bloc MARGES : 0,4,0 minimum) */
.mgp-page .e-con .elementor-widget.mgp-crumbs { margin-bottom: 1.2rem; }
.mgp-page .e-con .elementor-widget.mgp-sec-lead { margin-top: .2rem; }
.mgp-page .e-con.mgp-sec-body,
.mgp-page .e-con .elementor-widget.mgp-sec-body { margin-top: 2.2rem; }
.mgp-page .e-con .elementor-widget.mgp-zone-w { margin-top: 2rem; }
.mgp-page .e-con.mgp-gal { margin-top: 1.2rem; }
.mgp-page .e-con .elementor-widget.mgp-gal-title { margin-top: 2.6rem; }
.mgp-page .e-con .elementor-widget.mgp-gal-title:first-child { margin-top: 0; }
.mgp-page .e-con .elementor-widget.mgp-center-cta { margin-top: 2rem; text-align: center; }

/* ---------- RESPONSIVE (mêmes ruptures que la maquette) ---------- */
@media (max-width: 56.25rem) { /* 900px */
	.mgp-page .mgp-hero-grid,
	.mgp-page .mgp-split,
	.mgp-page .mgp-contact-grid,
	.mgp-page .mgp-panel-grid,
	.mgp-page .mgp-quals,
	.mgp-page .mgp-intro,
	.mgp-page .mgp-cols-3 { grid-template-columns: 1fr; }
	.mgp-page .mgp-steps,
	.mgp-page .mgp-why { grid-template-columns: 1fr 1fr; }
	.mgp-page .mgp-quals-logos { gap: .6rem; }
	.mgp-page .mgp-team,
	.mgp-page .mgp-reviews,
	.mgp-page .mgp-foot-grid,
	.mgp-page .mgp-strip-grid { grid-template-columns: 1fr 1fr; }
	.mgp-page .mgp-hero-visual { order: -1; aspect-ratio: 16 / 11; }
	.mgp-page .mgp-panel-visual { min-height: 14rem; }
	.mgp-page .mgp-panel-visual img { position: relative; }
	/* Carrousel : hauteur fixe (sinon saut de mise en page entre photos
	   paysage et portrait), images toujours empilées. */
	.mgp-page .mgp-carousel { position: relative; aspect-ratio: 4 / 3; }
	.mgp-page .mgp-carousel .mgp-slide img { position: absolute; }
}
@media (max-width: 35rem) { /* 560px */
	.mgp-page .mgp-form-row,
	.mgp-page .mgp-cols,
	.mgp-page .mgp-reviews,
	.mgp-page .mgp-strip-grid,
	.mgp-page .mgp-team,
	.mgp-page .mgp-foot-grid,
	.mgp-page .mgp-gallery-2,
	.mgp-page .mgp-steps,
	.mgp-page .mgp-why { grid-template-columns: 1fr; }
	.mgp-page .mgp-gal { grid-template-columns: 1fr 1fr; gap: .6rem; }
	.mgp-page .mgp-foot-bottom { flex-direction: column; }
	/* Qui sommes-nous : photos plus hautes sur mobile (l'équipe est en portrait). */
	.mgp-page .mgp-ph,
	.mgp-page .mgp-ph:last-child { aspect-ratio: 4 / 5; }
}