/*
 Theme Name:   Épicentre RH
 Theme URI:    http://epicentre-rh.local/
 Description:  Thème enfant de GeneratePress pour le site Épicentre RH (vitrine et catalogue de formations).
 Author:       épicentre-rh
 Template:     generatepress
 Version:      1.0.0
 Requires PHP: 7.4
 Text Domain:  epicentre-rh
*/

/* Styles personnalisés ci-dessous */

/* En-tête : slogan sous le logo */
.site-branding-container {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.site-branding-container .site-logo {
	margin-right: 0;
}

.site-branding-container .site-description {
	margin-top: 0.5em;
	text-align: center;
}

/* Menu mobile : bouton hamburger en haut à droite (sous 1050 px) */
@media (max-width: 1050px) {
	body {
		position: relative;
	}

	.main-navigation {
		position: absolute;
		top: var(--epi-topbar-h);
		right: 0;
		z-index: 100;
	}

	.main-navigation .menu-toggle {
		text-align: right;
	}

	/* Menu ouvert : la liste prend toute la largeur */
	.main-navigation.toggled {
		left: 0;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}
}

/* Charte : texte en bleu Épicentre */
body {
	color: var(--epi-bleu);
}

/* Charte : titres en cyan, soulignés en vert */
h1, h2, h3, h4, h5, h6,
.entry-title a {
	color: var(--epi-cyan);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--epi-vert);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.25em;
}


/* ===== Accueil dynamique ===== */

.epi-landing {
	--epi-radius: 14px;
	--epi-shadow: 0 10px 30px rgba(0, 107, 182, 0.08);
	--epi-shadow-hover: 0 16px 40px rgba(0, 107, 182, 0.14);
}

/* Nav d'ancres */
/* Sections */
.epi-section {
	padding: 3.5rem 1.25rem;
}

.epi-section--alt {
	background: linear-gradient(180deg, #f4fafd 0%, #ffffff 100%);
}

.epi-section--contact {
	background: linear-gradient(135deg, rgba(0, 154, 60, 0.06), rgba(0, 161, 231, 0.1));
}

.epi-section__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.epi-section__header {
	margin-bottom: 2rem;
	text-align: center;
}

.epi-section__lead {
	margin: 0.75rem auto 0;
	max-width: 36rem;
	color: var(--epi-bleu);
	opacity: 0.9;
}

/* Badges */
.epi-badge {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--epi-bleu);
	color: #fff;
}

.epi-badge--vert { background: var(--epi-vert); }
.epi-badge--bleu { background: var(--epi-bleu); }
.epi-badge--cyan { background: var(--epi-cyan); }

/* Hero / intro */
.epi-section--intro {
	padding-top: 2.5rem;
}

.epi-hero__title {
	margin-top: 0;
}

.epi-hero__content {
	font-size: 1.05rem;
	line-height: 1.7;
}

.epi-prose > *:first-child {
	margin-top: 0;
}

/* Titres dans les sections dynamiques : pas de double soulignement trop large sur h3 de cartes */
.epi-card__title,
.epi-table-card__title {
	text-decoration: none;
	border-bottom: 3px solid var(--epi-vert);
	padding-bottom: 0.35rem;
	display: inline-block;
	color: var(--epi-cyan);
	font-weight: 700;
	margin-top: 0;
}

/* Grille de cartes */
.epi-cards {
	display: grid;
	gap: 1.5rem;
}

.epi-cards--3 {
	grid-template-columns: repeat(3, 1fr);
}

.epi-cards--table {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.epi-cards--3,
	.epi-cards--table {
		grid-template-columns: 1fr;
	}
}

/* Carte générique */
.epi-card {
	position: relative;
	background: #fff;
	border-radius: var(--epi-radius);
	padding: 1.5rem 1.35rem 1.35rem;
	box-shadow: var(--epi-shadow);
	border: 1px solid rgba(0, 107, 182, 0.08);
	border-top: 4px solid var(--epi-bleu);
	transition: transform 0.2s, box-shadow 0.2s;
}

.epi-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--epi-shadow-hover);
}

.epi-card--accent-1 { border-top-color: var(--epi-vert); }
.epi-card--accent-2 { border-top-color: var(--epi-bleu); }
.epi-card--accent-3 { border-top-color: var(--epi-cyan); }

.epi-card__icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
	background: var(--epi-bleu);
	margin-bottom: 0.85rem;
	font-size: 0.95rem;
}

.epi-card--accent-1 .epi-card__icon { background: var(--epi-vert); }
.epi-card--accent-2 .epi-card__icon { background: var(--epi-bleu); }
.epi-card--accent-3 .epi-card__icon { background: var(--epi-cyan); }

.epi-card__tag {
	display: inline-block;
	margin-bottom: 0.65rem;
	padding: 0.15rem 0.55rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 4px;
	background: rgba(0, 161, 231, 0.12);
	color: var(--epi-bleu);
}

.epi-card__body {
	color: var(--epi-bleu);
	line-height: 1.55;
}

.epi-card__body p:last-child {
	margin-bottom: 0;
}

.epi-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.epi-card__chips li {
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	background: rgba(0, 154, 60, 0.1);
	color: var(--epi-vert);
	border: 1px solid rgba(0, 154, 60, 0.25);
}

/* Cartes type « tableau » (expertise) */
.epi-table-card {
	background: #fff;
	border-radius: var(--epi-radius);
	overflow: hidden;
	box-shadow: var(--epi-shadow);
	border: 1px solid rgba(0, 107, 182, 0.1);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
}

.epi-table-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--epi-shadow-hover);
}

.epi-table-card__head {
	padding: 1rem 1.25rem;
	background: var(--epi-bleu);
	color: #fff;
}

.epi-table-card.epi-card--accent-1 .epi-table-card__head { background: var(--epi-vert); }
.epi-table-card.epi-card--accent-2 .epi-table-card__head { background: var(--epi-bleu); }
.epi-table-card.epi-card--accent-3 .epi-table-card__head { background: var(--epi-cyan); }

.epi-table-card__title {
	margin: 0;
	color: #fff !important;
	border-bottom: none;
	text-decoration: none;
	font-size: 1.15rem;
}

.epi-table-card__body {
	padding: 1.15rem 1.25rem 1.35rem;
	flex: 1;
}

.epi-table-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.epi-table-card__list li {
	position: relative;
	padding: 0.55rem 0 0.55rem 1.4rem;
	border-bottom: 1px dashed rgba(0, 107, 182, 0.15);
	color: var(--epi-bleu);
	font-weight: 500;
}

.epi-table-card__list li:last-child {
	border-bottom: none;
}

.epi-table-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--epi-vert);
}

/* Citation méthodologie */
.epi-quote {
	margin: 2.5rem 0 0;
	padding: 1.75rem 1.5rem;
	border-radius: var(--epi-radius);
	background: #fff;
	border-left: 5px solid var(--epi-vert);
	box-shadow: var(--epi-shadow);
}

.epi-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.epi-quote p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--epi-bleu);
	font-style: italic;
}

.epi-quote figcaption {
	margin-top: 0.85rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--epi-cyan);
}

/* Proposition + CTA */
.epi-proposition {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	padding: 2rem 1.5rem;
	background: #fff;
	border-radius: var(--epi-radius);
	box-shadow: var(--epi-shadow);
	border: 1px solid rgba(0, 161, 231, 0.2);
}

.epi-proposition__content {
	text-align: left;
	margin-bottom: 1.5rem;
}

.epi-btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.epi-btn--primary {
	background: var(--epi-vert);
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(0, 154, 60, 0.25);
}

.epi-btn--primary:hover,
.epi-btn--primary:focus {
	background: var(--epi-bleu);
	transform: translateY(-2px);
}

.epi-contact-cta {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 2rem;
	background: #fff;
	border-radius: var(--epi-radius);
	box-shadow: var(--epi-shadow);
	border-top: 4px solid var(--epi-cyan);
}

.epi-contact-cta__hint {
	margin-top: 1rem;
	font-size: 0.9rem;
	opacity: 0.85;
}

.epi-empty {
	text-align: center;
	opacity: 0.75;
	font-style: italic;
}

/* Cacher le titre de la page WP (le h1 est dans le template) */
.page-template-page-accueil-dynamique .entry-header,
.page-template-page-accueil-dynamique .page-header {
	display: none;
}

/* Sur la page template, réduire le padding du contenu principal GP */
.page-template-page-accueil-dynamique .site-content,
.page-template-page-accueil-dynamique .content-area,
.page-template-page-accueil-dynamique .inside-article {
	padding-top: 0;
	padding-bottom: 0;
}

.page-template-page-accueil-dynamique .entry-content {
	margin-top: 0;
}

/* ==========================================================
   Menu principal WordPress : pastilles aux couleurs de la charte
   ========================================================== */
.main-navigation {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 3px solid var(--epi-vert);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
	color: var(--epi-bleu);
	background: transparent;
}

@media (min-width: 1051px) {
	.main-navigation .main-nav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.35rem 0.75rem;
		padding: 0.65rem 1rem;
	}

	.main-navigation .main-nav > ul > li > a {
		display: inline-block;
		padding: 0.35rem 0.75rem;
		line-height: 1.5;
		border-radius: 999px;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--epi-bleu);
		text-decoration: none;
		border: 1px solid transparent;
		transition: background 0.2s, color 0.2s, border-color 0.2s;
	}

	.main-navigation .main-nav > ul > li > a:hover,
	.main-navigation .main-nav > ul > li > a:focus,
	.main-navigation .main-nav > ul > li.sfHover > a {
		background: var(--epi-bleu);
		color: #fff !important;
		border-color: var(--epi-bleu);
	}

	/* Page en cours : pastille contour cyan */
	.main-navigation .main-nav > ul > li[class*="current-menu-"] > a,
	.main-navigation .main-nav > ul > li.current_page_item > a {
		color: var(--epi-cyan);
		border-color: var(--epi-cyan);
	}

	.main-navigation .main-nav > ul > li[class*="current-menu-"] > a:hover,
	.main-navigation .main-nav > ul > li.current_page_item > a:hover {
		color: #fff !important;
	}
}

/* Menu mobile ouvert : mêmes couleurs */
@media (max-width: 1050px) {
	.main-navigation.toggled .main-nav ul li a {
		color: var(--epi-bleu);
		font-weight: 600;
	}

	.main-navigation.toggled .main-nav ul li a:hover,
	.main-navigation.toggled .main-nav ul li a:focus {
		background: var(--epi-bleu);
		color: #fff !important;
	}

	.main-navigation.toggled .main-nav ul li[class*="current-menu-"] > a,
	.main-navigation.toggled .main-nav ul li.current_page_item > a {
		color: var(--epi-cyan);
	}

	/* Bouton fermé : pas de bandeau, juste l'icône en haut à droite */
	.main-navigation:not(.toggled) {
		background: transparent;
		border-bottom: 0;
		box-shadow: none;
		backdrop-filter: none;
	}
}

/* Bandeau slogan au-dessus du logo */
:root {
	--epi-topbar-h: 2.25rem;
}

.epi-topbar {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--epi-topbar-h);
	padding: 0 1rem;
	background: var(--epi-bleu);
	color: #fff;
}

.epi-topbar__text {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

@media (max-width: 480px) {
	.epi-topbar__text {
		font-size: 0.68rem;
		letter-spacing: 0.06em;
	}
}

/* Slogan retiré sous le logo (repris dans le bandeau) */
.site-header .site-description {
	display: none;
}

/* Menu : pas d'ombre ni de transparence au-dessus */
.main-navigation {
	background: #fff;
	box-shadow: none;
	backdrop-filter: none;
}

/* ==========================================================
   Page Accueil dynamique : fond #00509b, textes blancs, logo blanc
   ========================================================== */
body.page-template-page-accueil-dynamique {
	background-color: #00509b;
	color: #fff;
}

body.page-template-page-accueil-dynamique .site-header,
body.page-template-page-accueil-dynamique .inside-header,
body.page-template-page-accueil-dynamique .site,
body.page-template-page-accueil-dynamique .site-content,
body.page-template-page-accueil-dynamique .content-area,
body.page-template-page-accueil-dynamique .inside-article,
body.page-template-page-accueil-dynamique .entry-content,
body.page-template-page-accueil-dynamique .site-footer,
body.page-template-page-accueil-dynamique .footer-widgets-container,
body.page-template-page-accueil-dynamique .inside-site-info {
	background-color: #00509b;
	color: #fff;
}

body.page-template-page-accueil-dynamique,
body.page-template-page-accueil-dynamique p,
body.page-template-page-accueil-dynamique li,
body.page-template-page-accueil-dynamique a,
body.page-template-page-accueil-dynamique .epi-section__lead,
body.page-template-page-accueil-dynamique .epi-prose,
body.page-template-page-accueil-dynamique .epi-card__body,
body.page-template-page-accueil-dynamique .epi-table-card__body,
body.page-template-page-accueil-dynamique .epi-proposition__content,
body.page-template-page-accueil-dynamique .epi-contact-cta,
body.page-template-page-accueil-dynamique .epi-contact-cta__hint,
body.page-template-page-accueil-dynamique .epi-empty,
body.page-template-page-accueil-dynamique .epi-quote p,
body.page-template-page-accueil-dynamique .epi-quote figcaption,
body.page-template-page-accueil-dynamique .copyright-bar,
body.page-template-page-accueil-dynamique .site-info {
	color: #fff;
}

body.page-template-page-accueil-dynamique h1,
body.page-template-page-accueil-dynamique h2,
body.page-template-page-accueil-dynamique h3,
body.page-template-page-accueil-dynamique h4,
body.page-template-page-accueil-dynamique h5,
body.page-template-page-accueil-dynamique h6,
body.page-template-page-accueil-dynamique .epi-card__title,
body.page-template-page-accueil-dynamique .epi-table-card__title,
body.page-template-page-accueil-dynamique .epi-hero__title {
	color: #fff;
	text-decoration-color: var(--epi-vert);
}

body.page-template-page-accueil-dynamique .main-navigation {
	background: #00509b;
	border-bottom-color: var(--epi-vert);
}

body.page-template-page-accueil-dynamique .main-navigation .main-nav > ul > li > a,
body.page-template-page-accueil-dynamique .main-navigation .menu-toggle {
	color: #fff;
}

body.page-template-page-accueil-dynamique .main-navigation .main-nav > ul > li > a:hover,
body.page-template-page-accueil-dynamique .main-navigation .main-nav > ul > li > a:focus,
body.page-template-page-accueil-dynamique .main-navigation .main-nav > ul > li.sfHover > a {
	background: #fff;
	color: #00509b !important;
	border-color: #fff;
}

body.page-template-page-accueil-dynamique .main-navigation .main-nav > ul > li[class*="current-menu-"] > a,
body.page-template-page-accueil-dynamique .main-navigation .main-nav > ul > li.current_page_item > a {
	color: #fff;
	border-color: #fff;
}

body.page-template-page-accueil-dynamique .epi-section--alt,
body.page-template-page-accueil-dynamique .epi-section--contact {
	background: transparent;
}

body.page-template-page-accueil-dynamique .epi-card,
body.page-template-page-accueil-dynamique .epi-table-card,
body.page-template-page-accueil-dynamique .epi-quote,
body.page-template-page-accueil-dynamique .epi-proposition,
body.page-template-page-accueil-dynamique .epi-contact-cta {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
	box-shadow: none;
}

body.page-template-page-accueil-dynamique .epi-card:hover,
body.page-template-page-accueil-dynamique .epi-table-card:hover {
	background: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}

body.page-template-page-accueil-dynamique .epi-card__title,
body.page-template-page-accueil-dynamique .epi-table-card__title {
	border-bottom-color: var(--epi-vert);
	color: #fff;
}

body.page-template-page-accueil-dynamique .epi-table-card__title {
	color: #fff;
}

body.page-template-page-accueil-dynamique .epi-card__tag {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

body.page-template-page-accueil-dynamique .epi-card__chips li {
	background: rgba(0, 154, 60, 0.35);
	color: #fff;
}

body.page-template-page-accueil-dynamique .epi-btn--primary {
	background: var(--epi-vert);
	color: #fff;
}

body.page-template-page-accueil-dynamique .epi-btn--primary:hover,
body.page-template-page-accueil-dynamique .epi-btn--primary:focus {
	background: #fff;
	color: #00509b !important;
}

body.page-template-page-accueil-dynamique .separate-containers .inside-article,
body.page-template-page-accueil-dynamique.separate-containers .inside-article {
	box-shadow: none;
}

/* En-tête : espace réduit au-dessus et au-dessous du logo */
.inside-header {
	padding-top: 20px;
	padding-bottom: 10px;
}

.site-header .site-logo,
.site-header .header-image {
	margin-top: 0;
	margin-bottom: 0;
	display: block;
}

/* Menu : sans trait vert en dessous */
.main-navigation,
body.page-template-page-accueil-dynamique .main-navigation {
	border-bottom: 0;
}

/* ==========================================================
   Page dynamique : en-tête (hero) — accroche + texte à gauche, onde à droite
   ========================================================== */
:root {
	--epi-font-titre: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.epi-hero {
	padding-top: 3rem;
	padding-bottom: 3rem;
	overflow: hidden;
}

.epi-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 2.5rem;
	max-width: 1200px;
}

.epi-hero__headline {
	margin: 0 0 1.5rem;
	font-family: var(--epi-font-titre);
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.epi-hero__headline::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 4px;
	margin-top: 1.25rem;
	border-radius: 2px;
	background: var(--epi-vert);
}

.epi-hero__content {
	font-size: 1.05rem;
	line-height: 1.75;
}

.epi-hero__content p:last-child {
	margin-bottom: 0;
}

.epi-hero__media {
	display: flex;
	justify-content: center;
}

.epi-hero__image {
	width: 100%;
	max-width: 480px;
	height: auto;
}

@media (max-width: 900px) {
	.epi-hero__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Responsive : l'onde passe sous le texte */
	.epi-hero__media {
		order: 0;
	}

	.epi-hero__image {
		max-width: 260px;
	}
}

/* ==========================================================
   Menu collant en haut au défilement (fond qui s'assombrit)
   ========================================================== */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Les sections ne passent pas sous le menu quand on clique un lien */
.epi-landing [id] {
	scroll-margin-top: calc(var(--epi-nav-h, 64px) + 12px);
}

.main-navigation {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 1051px) {
	.main-navigation {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	body.admin-bar .main-navigation {
		top: 32px;
	}

	.main-navigation.is-stuck {
		background: #eef2f6;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	}

	body.page-template-page-accueil-dynamique .main-navigation.is-stuck {
		background: #003f7a;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	}
}

/* Mobile : le bouton hamburger reste en haut à droite */
@media (max-width: 1050px) {
	.main-navigation.is-stuck {
		position: fixed;
		top: 0;
	}

	.main-navigation.is-stuck:not(.toggled) {
		background: #eef2f6;
		border-bottom-left-radius: 10px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	}

	body.page-template-page-accueil-dynamique .main-navigation.is-stuck:not(.toggled),
	body.page-template-page-accueil-dynamique .main-navigation.toggled {
		background: #003f7a;
	}

	.main-navigation.toggled {
		max-height: 100vh;
		overflow-y: auto;
	}
}

/* ==========================================================
   Page dynamique : section Diagnostic sur fond bleu foncé (= menu collé)
   Bandeau pleine largeur via ombre + découpe, sans toucher à la structure
   ========================================================== */
body.page-template-page-accueil-dynamique #diagnostic {
	background: #003f7a;
	box-shadow: 0 0 0 100vmax #003f7a;
	clip-path: inset(0 -100vmax);
	padding-bottom: 5.5rem; /* plus d'espace sous les cartes (3.5rem par défaut) */
}

/* Formation : mots-clés en pastilles pleines sur fond vert */
.epi-card__chips li,
body.page-template-page-accueil-dynamique .epi-card__chips li {
	background: var(--epi-vert);
	border-color: var(--epi-vert);
	color: #fff;
}

.epi-card--formation .epi-card__body p {
	margin-bottom: 0;
}

/* Page dynamique : section Expertise & méthodologie sur fond cyan (pleine largeur) */
body.page-template-page-accueil-dynamique #expertise {
	background: var(--epi-cyan);
	box-shadow: 0 0 0 100vmax var(--epi-cyan);
	clip-path: inset(0 -100vmax);
}

/* Sur fond cyan, le 3e en-tête de carte (cyan) passe en bleu foncé pour rester visible */
body.page-template-page-accueil-dynamique #expertise .epi-table-card.epi-card--accent-3 .epi-table-card__head {
	background: #003f7a;
}

/* Expertise : cartes sur fond bleu Épicentre */
body.page-template-page-accueil-dynamique #expertise .epi-table-card {
	background: var(--epi-bleu);
	border-color: rgba(255, 255, 255, 0.25);
}

/* L'en-tête bleu de la 2e carte se confondrait avec le fond : bleu foncé */
body.page-template-page-accueil-dynamique #expertise .epi-table-card.epi-card--accent-2 .epi-table-card__head {
	background: #003f7a;
}

/* Expertise : phrase sous les cartes sans fond (seul le trait vert à gauche reste) */
body.page-template-page-accueil-dynamique #expertise .epi-quote {
	background: transparent;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 0;
	box-shadow: none;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

/* Expertise : les trois en-têtes de cartes en bleu foncé (plus de vert) */
body.page-template-page-accueil-dynamique #expertise .epi-table-card .epi-table-card__head {
	background: #003f7a;
}

/* Même espace en bas que Diagnostic pour Formation et Expertise */
body.page-template-page-accueil-dynamique #formation,
body.page-template-page-accueil-dynamique #expertise {
	padding-bottom: 5.5rem;
}

/* ==========================================================
   Section Diagnostic : titre souligné sur ~1/3, cartes sans contour
   ========================================================== */
body.page-template-page-accueil-dynamique #diagnostic .epi-section__header h2 {
	display: inline-block;
	position: relative;
	text-decoration: none;
	padding-bottom: 0.4em;
}

body.page-template-page-accueil-dynamique #diagnostic .epi-section__header h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 33%;
	height: 3px;
	border-radius: 3px;
	background: var(--epi-vert);
	transform: translateX(-50%);
}

body.page-template-page-accueil-dynamique #diagnostic .epi-card {
	border: 0;
	padding-bottom: 2.5rem;
}

/* ==========================================================
   Section Formation : même traitement que Diagnostic
   ========================================================== */
body.page-template-page-accueil-dynamique #formation .epi-section__header h2 {
	display: inline-block;
	position: relative;
	text-decoration: none;
	padding-bottom: 0.4em;
}

body.page-template-page-accueil-dynamique #formation .epi-section__header h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 33%;
	height: 3px;
	border-radius: 3px;
	background: var(--epi-vert);
	transform: translateX(-50%);
}

body.page-template-page-accueil-dynamique #formation .epi-section__lead {
	font-size: 1.25rem;
	line-height: 1.5;
}

body.page-template-page-accueil-dynamique #formation .epi-card {
	border: 0;
}

/* Mots-clés en pastilles bleu Épicentre */
body.page-template-page-accueil-dynamique #formation .epi-card__chips li {
	background: var(--epi-bleu);
	border-color: var(--epi-bleu);
	color: #fff;
}

/* Diagnostic + Formation : titres des cartes soulignés sur ~1/3, aligné à gauche */
body.page-template-page-accueil-dynamique #diagnostic .epi-card__title,
body.page-template-page-accueil-dynamique #formation .epi-card__title {
	display: block;
	position: relative;
	text-decoration: none;
	border-bottom: 0;
	padding-bottom: 0.45em;
}

body.page-template-page-accueil-dynamique #diagnostic .epi-card__title::after,
body.page-template-page-accueil-dynamique #formation .epi-card__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 33%;
	height: 3px;
	border-radius: 3px;
	background: var(--epi-vert);
}

/* ==========================================================
   Section Expertise : titre souligné sur ~1/3, listes sans puces séparées par un trait fin
   ========================================================== */
body.page-template-page-accueil-dynamique #expertise .epi-section__header h2 {
	display: inline-block;
	position: relative;
	text-decoration: none;
	padding-bottom: 0.4em;
}

body.page-template-page-accueil-dynamique #expertise .epi-section__header h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 33%;
	height: 3px;
	border-radius: 3px;
	background: var(--epi-vert);
	transform: translateX(-50%);
}

body.page-template-page-accueil-dynamique #expertise .epi-table-card__list li {
	padding-left: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

body.page-template-page-accueil-dynamique #expertise .epi-table-card__list li:last-child {
	border-bottom: 0;
}

body.page-template-page-accueil-dynamique #expertise .epi-table-card__list li::before {
	content: none;
}

/* Listes des cartes : majuscule en début de chaque élément */
.epi-table-card__list li::first-letter {
	text-transform: uppercase;
}

/* ==========================================================
   Notre proposition : présentation en deux colonnes, comme l'en-tête
   ========================================================== */
.epi-split__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 3rem;
	align-items: start; /* textes des deux colonnes alignés en haut */
}

.epi-split__title {
	margin: 0 0 0.75rem;
	font-family: var(--epi-font-titre);
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
}

.epi-split__title::after {
	content: "";
	display: block;
	width: 33%;
	height: 4px;
	margin-top: 0.6rem;
	border-radius: 4px;
	background: var(--epi-vert);
}

.epi-split__subtitle {
	margin: 1rem 0 0;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.4;
}

.epi-split__content h2 {
	margin-top: 0;
	font-size: 1.6rem;
	text-decoration: none;
}

.epi-split__content p:last-child {
	margin-bottom: 1.5rem;
}

body.page-template-page-accueil-dynamique .epi-split__title,
body.page-template-page-accueil-dynamique .epi-split__subtitle,
body.page-template-page-accueil-dynamique .epi-split__content,
body.page-template-page-accueil-dynamique .epi-split__content h2 {
	color: #fff;
}

body.page-template-page-accueil-dynamique #proposition {
	padding-top: 5rem;
	padding-bottom: 5.5rem;
}

@media (max-width: 900px) {
	.epi-split__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ==========================================================
   Contact : deux colonnes (formulaire | qui suis-je + coordonnées + photo)
   ========================================================== */
.epi-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
	text-align: left;
}

.epi-form__row {
	margin-bottom: 1rem;
}

.epi-form__row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.epi-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.epi-form input,
.epi-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border-radius: 8px;
	border: 1px solid rgba(0, 107, 182, 0.25);
	background: #fff;
	color: #1d2b3a;
	font: inherit;
}

.epi-form input:focus,
.epi-form textarea:focus {
	outline: 2px solid var(--epi-vert);
	outline-offset: 1px;
}

.epi-form__note {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	opacity: 0.75;
}

.epi-contact__photo {
	width: 140px;
	height: 140px;
	margin-bottom: 1.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed currentColor;
	font-size: 0.8rem;
	opacity: 0.7;
	text-align: center;
}

.epi-contact__about h2 {
	margin-top: 0;
}

.epi-contact__coords {
	margin-top: 1.5rem;
}

.epi-contact__coords h3 {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	text-decoration: none;
}

.epi-contact__coords ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.epi-contact__coords li {
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.epi-contact__coords li:last-child {
	border-bottom: 0;
}

body.page-template-page-accueil-dynamique .epi-contact__grid,
body.page-template-page-accueil-dynamique .epi-contact__grid h2,
body.page-template-page-accueil-dynamique .epi-contact__grid h3,
body.page-template-page-accueil-dynamique .epi-form label {
	color: #fff;
}

@media (max-width: 900px) {
	.epi-contact__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.epi-form__row--half {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================
   Pied de page : logo centré + barre copyright bleu foncé
   ========================================================== */
.epi-footer {
	padding: 2.5rem 1rem 2rem;
	text-align: center;
	background: var(--base-3);
}

.epi-footer__link {
	display: inline-block;
}

.epi-footer__logo {
	display: block;
	width: 260px;
	max-width: 70vw;
	height: auto;
	margin: 0 auto;
}

body.page-template-page-accueil-dynamique .epi-footer {
	background: #00509b;
}

.site-info,
body.page-template-page-accueil-dynamique .site-info {
	background: #003f7a;
	color: #fff;
}

.site-info .copyright-bar {
	width: 100%;
	text-align: center;
	color: #fff;
}

/* Barre copyright : bleu foncé sur toute la largeur (le conteneur intérieur ne recolore pas) */
.site-info .inside-site-info,
body.page-template-page-accueil-dynamique .site-info .inside-site-info {
	background: transparent;
}

/* ==========================================================
   Toutes les sections : titres (et phrase d'intro) alignés à gauche
   ========================================================== */
body.page-template-page-accueil-dynamique .epi-section__header {
	text-align: left;
}

body.page-template-page-accueil-dynamique .epi-section__lead {
	margin-left: 0;
	margin-right: 0;
}

/* Le trait vert court suit le titre à gauche */
body.page-template-page-accueil-dynamique .epi-section__header h2::after,
body.page-template-page-accueil-dynamique #diagnostic .epi-section__header h2::after,
body.page-template-page-accueil-dynamique #formation .epi-section__header h2::after,
body.page-template-page-accueil-dynamique #expertise .epi-section__header h2::after {
	left: 0;
	transform: none;
}

/* Logo du pied de page : même taille de logotype que l'en-tête (460 px pour le logo du haut) */
.epi-footer__logo {
	width: 331px;
	max-width: 80vw;
}

/* Pied de page : 60 px d'espace sous le logo */
.epi-footer {
	padding-bottom: 60px;
}

/* Coordonnées : liens lisibles sur fond bleu */
.epi-contact__coords .epi-prose ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.epi-contact__coords a,
body.page-template-page-accueil-dynamique .epi-contact__coords a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--epi-vert);
	text-underline-offset: 0.2em;
}

.epi-contact__coords a:hover {
	text-decoration-thickness: 2px;
}

/* Notre proposition : fond vert pleine largeur, trait du titre en blanc */
body.page-template-page-accueil-dynamique #proposition {
	background: var(--epi-vert);
	box-shadow: 0 0 0 100vmax var(--epi-vert);
	clip-path: inset(0 -100vmax);
}

body.page-template-page-accueil-dynamique #proposition .epi-split__title::after {
	background: #fff;
}

/* Notre proposition : fond bleu foncé du menu collé, trait du titre en vert */
body.page-template-page-accueil-dynamique #proposition {
	background: #003f7a;
	box-shadow: 0 0 0 100vmax #003f7a;
}

body.page-template-page-accueil-dynamique #proposition .epi-split__title::after {
	background: var(--epi-vert);
}

/* ==========================================================
   Formulaire Contact Form 7
   ========================================================== */
.epi-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.35rem;
}

.epi-form label {
	font-weight: 600;
	font-size: 0.9rem;
}

.epi-form select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border-radius: 8px;
	border: 1px solid rgba(0, 107, 182, 0.25);
	background: #fff;
	color: #1d2b3a;
	font: inherit;
}

.epi-form select:focus {
	outline: 2px solid var(--epi-vert);
	outline-offset: 1px;
}

.epi-form__rgpd {
	font-size: 0.85rem;
	line-height: 1.5;
}

.epi-form__rgpd .wpcf7-list-item {
	margin: 0;
}

.epi-form__rgpd label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
}

.epi-form__rgpd input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	flex: 0 0 auto;
	accent-color: var(--epi-vert);
}

.epi-form .wpcf7-submit {
	border: 0;
	cursor: pointer;
}

.epi-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.epi-form .wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: #ffd2d2;
}

.epi-form .wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.9rem;
}

.epi-form .wpcf7-spinner {
	vertical-align: middle;
}

/* Bouton Envoyer : pastille verte comme les autres boutons */
.epi-form input.wpcf7-submit {
	width: auto;
	padding: 0.75rem 2rem;
	border-radius: 999px;
	background: var(--epi-vert);
	color: #fff;
	font-weight: 700;
}

.epi-form input.wpcf7-submit:hover:not(:disabled),
.epi-form input.wpcf7-submit:focus:not(:disabled) {
	background: #fff;
	color: var(--epi-vert);
}

/* Contact + Qui suis-je : titres à la même hauteur, trait vert court (1/3) */
body.page-template-page-accueil-dynamique .epi-contact__title,
body.page-template-page-accueil-dynamique .epi-contact__about h2 {
	display: inline-block;
	position: relative;
	margin-top: 0;
	margin-bottom: 1.5rem;
	padding-bottom: 0.4em;
	text-decoration: none;
	color: #fff;
}

body.page-template-page-accueil-dynamique .epi-contact__title::after,
body.page-template-page-accueil-dynamique .epi-contact__about h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 33%;
	height: 3px;
	border-radius: 3px;
	background: var(--epi-vert);
}

.epi-contact__form-col > .epi-contact__title + .epi-form,
.epi-contact__about > :first-child {
	margin-top: 0;
}

/* ==========================================================
   Contact : téléphone et e-mail en boutons avec pictogramme
   (tout lien tel: ou mailto: de la page Contact devient un bouton)
   ========================================================== */
.epi-contact__coords p {
	margin: 0 0 0.9rem;
}

.epi-contact__coords p:has(a[href^="tel:"], a[href^="mailto:"]) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.epi-contact__coords a[href^="tel:"],
.epi-contact__coords a[href^="mailto:"],
body.page-template-page-accueil-dynamique .epi-contact__coords a[href^="tel:"],
body.page-template-page-accueil-dynamique .epi-contact__coords a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.3rem;
	border-radius: 999px;
	background: var(--epi-vert);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.epi-contact__coords a[href^="tel:"]:hover,
.epi-contact__coords a[href^="mailto:"]:hover,
.epi-contact__coords a[href^="tel:"]:focus,
.epi-contact__coords a[href^="mailto:"]:focus,
body.page-template-page-accueil-dynamique .epi-contact__coords a[href^="tel:"]:hover,
body.page-template-page-accueil-dynamique .epi-contact__coords a[href^="mailto:"]:hover {
	background: #fff;
	color: var(--epi-vert);
}

.epi-contact__coords a[href^="tel:"]::before,
.epi-contact__coords a[href^="mailto:"]::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--epi-picto) center / contain no-repeat;
	mask: var(--epi-picto) center / contain no-repeat;
}

/* Pictos : combiné téléphone et enveloppe */
.epi-contact__coords a[href^="tel:"] {
	--epi-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

.epi-contact__coords a[href^="mailto:"] {
	--epi-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.2-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}

/* Photo sous « Qui suis-je ? » */
.epi-contact__about img.epi-contact__photo {
	display: block;
	width: 160px;
	height: 160px;
	margin: 0 0 1.25rem;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	opacity: 1;
}

/* Espace entre « Régis Delattre » et les boutons */
.epi-contact__coords p:has(a[href^="tel:"], a[href^="mailto:"]) {
	margin-top: 1.25rem;
}

/* Photo « Qui suis-je ? » : plus grande, sans contour */
.epi-contact__about img.epi-contact__photo {
	width: 220px;
	height: 220px;
	border: 0;
}

/* Plus d'espace entre « Régis Delattre » et les boutons */
.epi-contact__coords p:has(a[href^="tel:"], a[href^="mailto:"]) {
	margin-top: 2rem;
}

/* En-tête : onde plus grande */
.epi-hero__grid {
	grid-template-columns: 1fr 1fr;
}

.epi-hero__image {
	width: 100%;
	max-width: 640px;
}

@media (max-width: 900px) {
	.epi-hero__grid {
		grid-template-columns: 1fr;
	}

	.epi-hero__image {
		max-width: 360px;
	}
}

/* ==========================================================
   Formation : onde en fond, en amorce (coupée par le bord gauche de la fenêtre)
   ========================================================== */
body.page-template-page-accueil-dynamique #formation {
	position: relative;
	isolation: isolate;
}

body.page-template-page-accueil-dynamique #formation::before {
	content: "";
	position: absolute;
	top: 50%;
	/* centre de l'onde à environ 80 px du bord gauche de la fenêtre */
	left: calc(50% - 50vw - 300px + 80px);
	width: 600px;
	height: 600px;
	transform: translateY(-50%);
	background: url("../../uploads/2026/10/onde-fond-transparent.png") center / contain no-repeat;
	opacity: 0.35;
	pointer-events: none;
	z-index: -1;
}

/* Formation : cartes opaques (même teinte qu'avant, sans transparence) */
body.page-template-page-accueil-dynamique #formation .epi-card {
	background: #145fa5;
}

/* Formation : onde de fond plus grande (900 px, centre toujours près du bord gauche) */
body.page-template-page-accueil-dynamique #formation::before {
	width: 900px;
	height: 900px;
	left: calc(50% - 50vw - 450px + 120px);
}

/* ==========================================================
   Mise en page aérée : plus d'espace en haut et en bas de chaque section
   ========================================================== */
body.page-template-page-accueil-dynamique .epi-section,
body.page-template-page-accueil-dynamique #diagnostic,
body.page-template-page-accueil-dynamique #formation,
body.page-template-page-accueil-dynamique #expertise,
body.page-template-page-accueil-dynamique #proposition,
body.page-template-page-accueil-dynamique #contact {
	padding-top: 6.5rem;
	padding-bottom: 7rem;
}

body.page-template-page-accueil-dynamique #qui-sommes-nous {
	padding-top: 4.5rem;
	padding-bottom: 6rem;
}

@media (max-width: 768px) {
	body.page-template-page-accueil-dynamique .epi-section,
	body.page-template-page-accueil-dynamique #diagnostic,
	body.page-template-page-accueil-dynamique #formation,
	body.page-template-page-accueil-dynamique #expertise,
	body.page-template-page-accueil-dynamique #proposition,
	body.page-template-page-accueil-dynamique #contact,
	body.page-template-page-accueil-dynamique #qui-sommes-nous {
		padding-top: 4rem;
		padding-bottom: 4.5rem;
	}
}

/* Boutons Envoyer, téléphone et e-mail : fond bleu foncé du menu collé, survol blanc */
.epi-form input.wpcf7-submit,
.epi-contact__coords a[href^="tel:"],
.epi-contact__coords a[href^="mailto:"],
body.page-template-page-accueil-dynamique .epi-contact__coords a[href^="tel:"],
body.page-template-page-accueil-dynamique .epi-contact__coords a[href^="mailto:"] {
	background: #003f7a;
	color: #fff;
}

.epi-form input.wpcf7-submit:hover:not(:disabled),
.epi-form input.wpcf7-submit:focus:not(:disabled),
.epi-contact__coords a[href^="tel:"]:hover,
.epi-contact__coords a[href^="mailto:"]:hover,
.epi-contact__coords a[href^="tel:"]:focus,
.epi-contact__coords a[href^="mailto:"]:focus,
body.page-template-page-accueil-dynamique .epi-contact__coords a[href^="tel:"]:hover,
body.page-template-page-accueil-dynamique .epi-contact__coords a[href^="mailto:"]:hover {
	background: #fff;
	color: #003f7a;
}

/* Menu collé : logo e-epicentre à gauche */
.main-navigation .inside-navigation { position: relative; }
.main-navigation.is-stuck .inside-navigation::before {
	content: "";
	position: absolute;
	left: 40px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 32px;
	background: url("/wp-content/uploads/2026/10/e-epicentre.png") no-repeat center / contain;
}
@media (max-width: 1050px) {
	.main-navigation.is-stuck .inside-navigation::before { display: none; }
}

/* Hero : bouton vers la page épicentre rh & understüd */
.epi-hero__cta { margin-top: 2rem; }
.epi-btn-understud {
	display: inline-block;
	padding: 0.85rem 1.8rem;
	background: #003f7a;
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.epi-btn-understud:hover,
.epi-btn-understud:focus {
	background: #fff;
	color: #003f7a;
}

/* Mobile : onde du header masquée */
@media (max-width: 900px) {
	.epi-hero__media { display: none !important; }
}