/*
Theme Name: mdmsynergie
Description: Thème sur-mesure pour mdmsynergie, économie de la construction. Site vitrine 3 pages. Contenu éditable directement dans les pages, modèles réduits à l'en-tête et au pied de page.
Author: mdmsynergie
Version: 3.3
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mdmsynergie
*/

/* ---------- En-tête ---------- */
.mdm-header {
	border-bottom: 1px solid #eeeeee;
	box-shadow: 0 1px 3px rgba(12, 35, 64, 0.04);
	background-color: #FBFAF8;
	position: sticky;
	top: 0;
	z-index: 100;
	gap: 1rem;
}

.mdm-header-right {
	gap: 0;
	flex-wrap: nowrap !important;
}

/* Navigation : jamais de retour à la ligne */
.mdm-nav {
	flex-wrap: nowrap !important;
}
.mdm-nav ul {
	flex-wrap: nowrap !important;
}
.mdm-nav a {
	padding: 6px 12px !important;
	transition: color 0.15s ease;
	font-weight: 500;
	white-space: nowrap;
}
.mdm-nav a:hover {
	color: #C56A3D !important;
}

/* Bouton Contact : jamais coupé en deux */
.mdm-header-cta .wp-block-button__link {
	padding: 9px 20px;
	white-space: nowrap;
}
.mdm-header-cta .wp-block-button {
	min-width: max-content;
}

/* ---------- Hero : texture façon plan technique ---------- */
.mdm-hero {
	position: relative;
	background-image:
		linear-gradient(100deg,
			rgba(251, 250, 248, 0.97) 0%,
			rgba(251, 250, 248, 0.94) 42%,
			rgba(251, 250, 248, 0.72) 62%,
			rgba(251, 250, 248, 0.55) 100%),
		url("assets/projets/hero-architecture.webp");
	background-size: auto, cover;
	background-position: center, center right;
	background-repeat: no-repeat;
}

/* Sous 900px, la photo passe en retrait pour garder le texte lisible */
@media (max-width: 900px) {
	.mdm-hero {
		background-image:
			linear-gradient(180deg,
				rgba(251, 250, 248, 0.97) 0%,
				rgba(251, 250, 248, 0.95) 70%,
				rgba(251, 250, 248, 0.88) 100%),
			url("assets/projets/hero-architecture.webp");
	}
}

/* ---------- Cartes ---------- */
.mdm-card {
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	border-top: 3px solid #C56A3D;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(12, 35, 64, 0.05);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	height: 100%;
}
.mdm-card:hover {
	box-shadow: 0 6px 20px rgba(12, 35, 64, 0.09);
	transform: translateY(-2px);
}

/* ---------- Prestations (grille à coches) ---------- */
.mdm-service {
	padding: 1.5rem 1rem;
	height: 100%;
	transition: transform 0.2s ease;
}
.mdm-service:hover {
	transform: translateY(-2px);
}
.mdm-check {
	color: #C56A3D;
	font-size: 1.6rem;
	line-height: 1;
	margin-bottom: 0.6rem !important;
	font-weight: 700;
}
.mdm-service p:not(.mdm-check) {
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
}

/* ---------- Cartes projet avec photo ---------- */
.mdm-projet {
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(12, 35, 64, 0.05);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	height: 100%;
}
.mdm-projet:hover {
	box-shadow: 0 8px 24px rgba(12, 35, 64, 0.10);
	transform: translateY(-3px);
}
.mdm-projet-img {
	margin: 0 !important;
	overflow: hidden;
}
.mdm-projet-img img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.mdm-projet:hover .mdm-projet-img img {
	transform: scale(1.03);
}
.mdm-projet-txt {
	padding: 1.4rem 1.5rem 1.6rem;
	border-top: 3px solid #C56A3D;
}
.mdm-projet-txt p {
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
}

/* ---------- Logo outil (DeviSOC) ---------- */
.mdm-logo-outil {
	margin-top: 1.5rem !important;
	opacity: 0.9;
}
.mdm-logo-outil img {
	border-radius: 6px;
}

/* ---------- Boutons ---------- */
.wp-block-button__link {
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.wp-block-button__link:hover {
	opacity: 0.88;
}

/* ---------- Ancre : compense l'en-tête collant ---------- */
#realisations {
	scroll-margin-top: 110px;
}

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
	.mdm-header {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
	.mdm-header a[title="Accueil - mdmsynergie"] {
		width: 210px !important;
	}
	.mdm-nav a {
		padding: 6px 9px !important;
		font-size: 0.88rem !important;
	}
	.mdm-header-cta {
		margin-left: 0.75rem !important;
	}
	.mdm-header-cta .wp-block-button__link {
		padding: 8px 14px;
		font-size: 0.85rem !important;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.mdm-header {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.mdm-header a[title="Accueil - mdmsynergie"] {
		width: 165px !important;
	}
	.mdm-header-cta .wp-block-button__link {
		padding: 8px 12px;
		font-size: 0.8rem !important;
	}
	.mdm-projet-img img {
		height: 200px;
	}
	.mdm-hero h1 {
		font-size: 2rem !important;
	}
}

/* ---------- Typologie de projet (pastille) ---------- */
.mdm-typo {
	display: inline-block;
	font-size: 0.72rem !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #5A6472;
	background: #EFF1F4;
	border: 1px solid #e4e6ea;
	border-radius: 3px;
	padding: 4px 9px;
	margin: 0 0 0.7rem 0 !important;
	line-height: 1.3;
}

/* ---------- Ligne Missions ---------- */
.mdm-missions {
	margin-top: 0.9rem !important;
	padding-top: 0.75rem;
	border-top: 1px solid #eeeeee;
	color: #5A6472;
}
.mdm-missions strong {
	color: #0C2340;
}

/* ---------- Illustration de page ---------- */
.mdm-illus {
	margin-top: 2rem !important;
	margin-bottom: 2.5rem !important;
}
.mdm-illus img {
	border-radius: 8px;
	border-top: 3px solid #C56A3D;
	width: 100%;
	height: auto;
	display: block;
}
.mdm-illus figcaption {
	font-size: 0.82rem;
	color: #5A6472;
	margin-top: 0.6rem;
	font-style: italic;
}

/* ---------- Liens dans le corps de texte ---------- */
.wp-block-group p a[target="_blank"] {
	color: #C56A3D;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wp-block-group p a[target="_blank"]:hover {
	color: #0C2340;
}

/* ---------- Pied de page ---------- */
.mdm-footer-liens {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.mdm-footer-liens li {
	margin-bottom: 0.4rem;
}
footer a {
	color: #FBFAF8 !important;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease, color 0.15s ease;
}
footer a:hover {
	opacity: 1;
	color: #C56A3D !important;
}
.mdm-footer-sep {
	border-color: rgba(251, 250, 248, 0.18);
	margin: 2rem 0 1.25rem;
}

/* ---------- FAQ ---------- */
.mdm-faq h3 {
	margin-top: 1.8rem;
	margin-bottom: 0.5rem;
}

/* ---------- Sections pleine largeur : marges internes cohérentes ---------- */
.alignfull > .wp-block-group__inner-container,
.wp-block-post-content > .alignfull {
	box-sizing: border-box;
}

/* Sur très grands écrans, on évite que les bandes paraissent trop hautes */
@media (min-width: 1600px) {
	.mdm-hero {
		background-size: auto, cover;
	}
}

/* ---------- Rythme des sections sur grands écrans ---------- */
@media (min-width: 1200px) {
	/* Les bandes gagnent en respiration verticale */
	.alignfull {
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
	/* Le texte courant reste lisible mais occupe mieux l'espace */
	.mdm-hero h1 {
		font-size: 3rem !important;
	}
}

/* Séparation nette entre deux bandes claires consécutives */
.has-blanc-background-color + .has-blanc-background-color {
	border-top: 1px solid #EFF1F4;
}

/* ============================================================
   PAGE MÉTIER — traitement distinct de la page d'accueil
   ============================================================ */

/* Hero sombre : rupture visuelle immédiate avec le hero clair de l'accueil */
.mdm-hero-sombre {
	background-image:
		linear-gradient(100deg, rgba(12,35,64,0.97) 0%, rgba(12,35,64,0.92) 55%, rgba(12,35,64,0.80) 100%),
		url("assets/projets/hero-architecture.webp");
	background-size: auto, cover;
	background-position: center, center right;
	background-repeat: no-repeat;
}
.mdm-hero-sombre .mdm-eyebrow,
.mdm-hero-sombre p:first-of-type {
	color: #C56A3D !important;
}
.mdm-hero-chapo {
	color: rgba(251, 250, 248, 0.82) !important;
	max-width: 70ch;
}

/* Sommaire cliquable */
.mdm-sommaire-liste {
	list-style: none;
	padding-left: 0;
	margin: 0.75rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}
.mdm-sommaire-liste li {
	margin: 0;
}
.mdm-sommaire-liste a {
	display: inline-block;
	font-size: 0.87rem;
	color: #0C2340;
	text-decoration: none;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 4px;
	padding: 6px 12px;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.mdm-sommaire-liste a:hover {
	border-color: #C56A3D;
	color: #C56A3D;
}

/* Numérotation éditoriale des missions */
.mdm-missions-num {
	counter-reset: mission;
}
.mdm-missions-num h2 {
	counter-increment: mission;
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin-top: 3rem;
}
.mdm-missions-num h2::before {
	content: counter(mission, decimal-leading-zero);
	font-size: 0.9rem;
	font-weight: 600;
	color: #C56A3D;
	letter-spacing: 1px;
	flex-shrink: 0;
	padding-top: 0.35rem;
}

/* Les ancres tiennent compte de l'en-tête collant */
.mdm-missions-num h2[id],
h2[id="faq"] {
	scroll-margin-top: 110px;
}

@media (max-width: 781px) {
	.mdm-missions-num h2 {
		gap: 0.6rem;
	}
	.mdm-sommaire-liste a {
		font-size: 0.82rem;
		padding: 5px 10px;
	}
}