/**
 * Styles propres à la page d'accueil (gabarit « Page d'accueil », home-page.php).
 *
 * Chargé après theme.css, et uniquement sur ce gabarit (cf. functions.php) :
 * les autres pages n'en portent pas le poids, et ce qui est écrit ici ne peut
 * pas déborder sur le reste du site.
 */

/* ---------------------------------------------------------------------------
 * Grands titres de section — .titleHome, repris de la v1
 *
 * Dans la v1 la règle est partagée par .titleHome, .titleMain et .title-page.
 * Seul .titleHome est repris ici ; les deux autres reviendront avec les
 * gabarits qui les utilisent.
 *
 * Deux formats d'écran, comme en v1 (bascule à 768px) :
 *
 *   - bureau : titre en bloc, aligné à gauche, souligné sur toute la largeur
 *     de la colonne ;
 *   - mobile : titre centré, souligné sous le texte seulement.
 *
 * Conversion des valeurs : la v1 travaille sur une base de 14px (Bulma),
 * Bootstrap sur 16px. Chaque rem relevé dans la v1 est donc multiplié par
 * 14/16, sinon le rendu sort 14 % trop grand.
 * ------------------------------------------------------------------------ */

.titleHome {
	display: block;
	margin: 0 0 0.875rem; /* le margin-bottom .5rem de Bootstrap ne suffit pas */
	padding: 0 0 0.875rem 0.875rem; /* 14px, le 1rem de la v1 */
	border-bottom: 1px solid var(--eh-turquoise);
	color: var(--eh-turquoise);
	font-size: 2.0125rem; /* 32.2px, les 2.3rem de la v1 */
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
}

/*
 * En v1 le titre mobile passe en inline-block dans un parent .center, pour
 * que le filet ne dépasse pas du texte. Ici `display: table` avec des marges
 * automatiques obtient le même résultat sans conteneur intermédiaire : le
 * bloc se resserre sur son contenu et se centre de lui-même.
 */
@media (max-width: 767.98px) {
	.titleHome {
		display: table;
		margin: 0.875rem auto; /* 14px, le 1rem 0 de la v1 */
		padding: 0;
		font-size: 1.44375rem; /* 23.1px, les 1.65rem de la v1 */
		font-weight: 700;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
 * Triptyque — le `.hero .infobar` de la v1
 *
 * Bande sur la photographie du bandeau (cover.jpg), fixe au défilement sur
 * grand écran comme en v1 ; en dessous de lg l'attache fixe est abandonnée,
 * les navigateurs mobiles la gèrent mal (iOS l'ignore, d'autres saccadent).
 * Trois encarts translucides à filet blanc, texte blanc ombré, hauteur
 * égalisée par la grille. La v1 avait 30px en haut et 10px en bas, mais les
 * marges des colonnes Bulma faussaient le compte ; ici le même rembourrage
 * des deux côtés, 30px (demande du 2026-09-10). La grille Bootstrap (.row
 * g-*) n'ajoute rien en haut ni en bas : la gouttière verticale est annulée
 * par la marge négative de la rangée.
 * ------------------------------------------------------------------------ */

.eh-triptyque {
	padding: 1.875rem 0;
	background-image: url("../../images/cover.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}

@media (min-width: 992px) {
	.eh-triptyque {
		background-attachment: fixed;
	}
}

.eh-triptyque-item {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(255, 255, 255, 0.3);
	border: 1px solid #fff;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

a.eh-triptyque-item:hover,
a.eh-triptyque-item:focus-visible {
	background: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.eh-triptyque-text {
	margin: 0;
	font-size: 1.75rem; /* 28px, le .title.is-3 (2rem) de la v1 */
	font-weight: 300; /* le .title de la version de Bulma embarquée par la v1 */
	line-height: 1.125;
	word-break: break-word;
	text-align: center;
	color: inherit;
}

@media (max-width: 767.98px) {
	.eh-triptyque {
		padding: 1rem 0;
	}

	.eh-triptyque-text {
		font-size: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
 * Punchline — l'encart promo et l'accroche de la v1
 *
 * Entre le bandeau et les actualités, dans l'ordre réglé dans Home >
 * Punchline. Valeurs de la v1 converties (× 14/16), bascule à 767.98px comme
 * ailleurs dans le thème ; la v1 basculait à 768/769.
 * ------------------------------------------------------------------------ */

/* La section porte l'espacement vertical ; les zones n'ont pas de marge. */
.eh-punchline {
	margin: 1rem auto;
}

/*
 * Encart promo : le `.home-promo-encart` de la v1. Bouton orange pleine
 * largeur, blanc au survol ; la flèche glisse (animate.css). Sans marge
 * (demande du 2026-09-11) : la v1 en avait 1.5rem 0 .5rem.
 */
.eh-promo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65625rem; /* 10.5px, le .75rem de la v1 */
	width: 100%;
	margin: 0;
	padding: 0.7875rem 1.225rem; /* .9rem 1.4rem */
	background: var(--eh-orange);
	border: 1px solid var(--eh-orange);
	border-radius: 0.4375rem; /* .5rem */
	box-shadow: 3px 3px 4px #bfbfbf;
	color: #fff;
	font-size: 1.2075rem; /* 19.32px, le 1.38rem de la v1 */
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

a.eh-promo:hover,
a.eh-promo:focus-visible {
	background: #fff;
	color: var(--eh-orange);
}

.eh-promo-arrow {
	font-size: 1.225rem; /* 1.4rem */
}

@media (max-width: 767.98px) {
	.eh-promo {
		padding: 0.7rem 0.875rem; /* .8rem 1rem */
		font-size: 1.05rem; /* 1.2rem */
	}
}

/*
 * Accroche : la `.accroche` de la v1, citation en italique gris foncé entre
 * deux guillemets orange. <blockquote> pour le sens ; Bootstrap lui met une
 * marge basse de 1rem, remise à zéro ici, le rembourrage fait l'espacement.
 */
.eh-accroche {
	margin: 0;
	padding: 0; /* la v1 avait 10px 0 30px, retiré le 2026-09-11 */
	color: #363636;
	font-size: 1.375rem; /* 22px */
	font-style: italic;
}

.eh-accroche-quote {
	display: block;
	flex: 0 0 auto;
	margin: 0 auto;
	padding-top: 1.875rem; /* 30px */
	color: var(--eh-orange);
	font-size: 3.5rem; /* 56px, le 4rem de la v1 */
	font-style: italic;
}

.eh-accroche-text {
	margin: 0;
	padding: 0 2.625rem; /* le 3rem de body.home .intro */
	text-align: justify;
}

@media (max-width: 767.98px) {
	.eh-accroche {
		font-size: 1.05rem; /* 1.2rem */
	}

	.eh-accroche-quote {
		font-size: 1.75rem; /* 2rem */
	}

	.eh-accroche-text {
		padding: 0 0.875rem; /* 1rem */
		font-size: 0.9625rem; /* 1.1rem */
	}
}

/* ---------------------------------------------------------------------------
 * Sections du bas de page — Home > Section
 *
 * Les blocs `.work` / `.help` (image de fond, titre blanc en surimpression,
 * tout le bloc cliquable) et le témoignage vidéo `.news-text` de la v1.
 * Valeurs converties (× 14/16) ; les paliers v1 à 769px et 400px deviennent
 * 767.98px et 399.98px.
 * ------------------------------------------------------------------------ */

/* Deux séparateurs v1 de 20px entre les sections : 2.5rem entre les blocs. */
.eh-home-block + .eh-home-block {
	margin-top: 2.5rem;
}

/*
 * Bloc-image. L'image est en fond par `object-fit` plutôt qu'en
 * `background-image` en ligne : WordPress fournit alors srcset et lazy
 * loading. Sans image (`.eh-block-empty`) : fond turquoise uni.
 */
.eh-block-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
	padding: 9.375rem 1rem; /* 150px */
	border-radius: 5px;
	background: var(--eh-turquoise);
	color: #fff;
	text-decoration: none;
}

a.eh-block-image:hover,
a.eh-block-image:focus-visible {
	color: #fff;
}

.eh-block-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le `.pictext` de la v1 : blanc ombré, gras, majuscules, 33px. */
.eh-block-pictext {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #fff;
	font-size: 2.0625rem; /* 33px */
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
	text-transform: uppercase;
}

@media (max-width: 767.98px) {
	.eh-block-image {
		padding: 4.6875rem 1rem; /* 75px */
	}

	.eh-block-pictext {
		font-size: 1.75rem; /* le 2rem de la v1 */
	}
}

@media (max-width: 399.98px) {
	.eh-block-image {
		padding: 3.125rem 1rem; /* 50px */
	}

	.eh-block-pictext {
		font-size: 1.3125rem; /* le 1.5rem de la v1 */
	}
}

/*
 * Vidéo : lecteur pleine largeur, coins arrondis comme le bloc-image. La
 * légende (.eh-block-caption) suit la règle des légendes d'images des pages,
 * dans theme.css : grise, 1rem, centrée (demande du 2026-09-11).
 */
.eh-block-video {
	margin: 0;
}

.eh-block-video video,
.eh-block-video .eh-block-poster {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
	background: #000;
}

.eh-block-caption {
	margin-top: 0.75rem; /* gris, 1rem, italique, centré : règle commune dans theme.css */
}

.eh-block-caption a {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Partenaires — Home > Partenaires
 *
 * Deux lignes de logos en défilement continu (mouvement dans animate.css),
 * dans le conteneur comme le reste de la page, bords fondus par un masque.
 * Logos en noir et blanc, en couleur au survol ou au focus clavier.
 * ------------------------------------------------------------------------ */

.eh-partners {
	margin-top: 2.5rem;
}

.eh-marquee {
	overflow: hidden;
	padding: 1rem 0;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* La piste est aussi large que son contenu : les copies se suivent sans retour à la ligne. */
.eh-marquee-track {
	display: flex;
	width: max-content;
	align-items: center;
}

.eh-marquee-group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4rem;
	padding-right: 4rem; /* même écart entre la fin d'une copie et le début de la suivante */
}

.eh-partner {
	display: block;
	flex: 0 0 auto;
}

.eh-partner-logo {
	display: block;
	width: auto;
	height: 5rem; /* 80px */
	max-width: 14rem;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
}

.eh-partner:hover .eh-partner-logo,
.eh-partner:focus-visible .eh-partner-logo {
	filter: none;
	opacity: 1;
}

.eh-partners-more {
	margin-top: 1.5rem;
}

@media (max-width: 767.98px) {
	.eh-marquee-group {
		gap: 2.5rem;
		padding-right: 2.5rem;
	}

	.eh-partner-logo {
		height: 3.5rem;
		max-width: 10rem;
	}
}

/*
 * Mouvement réduit : plus de défilement (animate.css), donc plus de copies ni
 * de masque — la première copie s'affiche en grille centrée, qui passe à la
 * ligne.
 */
@media (prefers-reduced-motion: reduce) {
	.eh-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.eh-marquee-track {
		width: auto;
		justify-content: center;
	}

	.eh-marquee-group {
		flex-wrap: wrap;
		justify-content: center;
		padding-right: 0;
	}

	.eh-marquee-copy {
		display: none;
	}
}