/*
 * Socle commun du kit : styles de base appliqués par-dessus GeneratePress.
 *
 * Couleurs, polices et tailles viennent de theme.json (variables --wp--preset--…),
 * réglages de forme (arrondis, titres, marges) de settings.custom (variables --wp--custom--…),
 * donc de l'habillage du client. Ne jamais écrire une couleur en dur ici.
 */

:root {
	/* Flèche ↗ des boutons et des liens, dessinée avec la couleur du texte (masque). */
	--kit-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
	/* Combiné de téléphone, même principe. */
	--kit-telephone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	/* Deuxième partie d'un titre (texte en italique dans l'éditeur) : ton adouci. */
	--kit-titre-doux: color-mix(in srgb, var(--wp--preset--color--texte-doux) 80%, var(--wp--preset--color--fond));
}

/* Texte */

body {
	background-color: var(--wp--preset--color--fond);
	color: var(--wp--preset--color--texte);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.7;
}

button,
input,
select,
textarea {
	font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: inherit;
	font-family: var(--wp--preset--font-family--titres);
	font-weight: var(--wp--custom--titres--graisse);
	line-height: var(--wp--custom--titres--interligne);
	letter-spacing: var(--wp--custom--titres--espacement);
	text-transform: var(--wp--custom--titres--casse);
	text-wrap: balance;
	margin-bottom: 0.5em;
}

h1 {
	font-size: var(--wp--preset--font-size--enorme);
}

h2 {
	font-size: var(--wp--preset--font-size--tres-grand);
}

h3 {
	font-size: var(--wp--preset--font-size--grand);
}

h4 {
	font-size: var(--wp--preset--font-size--moyen);
}

/* Titre en deux tons : la partie en italique passe à la ligne, en couleur adoucie. */
:is(h1, h2, h3) em {
	display: block;
	color: var(--kit-titre-doux);
	font-style: normal;
}

/* Point final en couleur d'accent (classe kit-point sur un titre). */
.kit-point::after {
	content: ".";
	color: var(--wp--preset--color--accent);
}

a {
	color: var(--wp--preset--color--principale);
}

a:hover,
a:focus {
	color: var(--wp--preset--color--principale-foncee);
}

/* Focus clavier : contour bien visible sur fond clair comme sur fond foncé. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--principale);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
}

/* Boutons : accent par défaut ; variantes « Couleur principale », « Contour » et « Lien souligné ». */

.wp-block-button .wp-block-button__link,
.kit-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25em;
	min-height: 54px;
	padding: 0.85em 1.3em;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--arrondi);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--principale-foncee);
	font-family: var(--wp--preset--font-family--texte);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.2s;
}

.wp-block-button .wp-block-button__link::after,
.kit-bouton::after,
.kit-fleche::after {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background-color: currentColor;
	-webkit-mask: var(--kit-fleche) center / contain no-repeat;
	mask: var(--kit-fleche) center / contain no-repeat;
}

.kit-fleche::after {
	display: inline-block;
	margin-left: 0.6em;
	vertical-align: -0.1em;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.kit-bouton:hover,
.kit-bouton:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 88%, var(--wp--preset--color--principale-foncee));
	color: var(--wp--preset--color--principale-foncee);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button .wp-block-button__link:hover,
	.kit-bouton:hover {
		transform: translateY(-2px);
	}
}

.wp-block-button.is-style-principale .wp-block-button__link,
.kit-bouton--principale {
	background-color: var(--wp--preset--color--principale);
	color: var(--wp--preset--color--fond);
}

.wp-block-button.is-style-principale .wp-block-button__link:hover,
.wp-block-button.is-style-principale .wp-block-button__link:focus,
.kit-bouton--principale:hover,
.kit-bouton--principale:focus {
	background-color: var(--wp--preset--color--principale-foncee);
	color: var(--wp--preset--color--fond);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.kit-bouton--contour {
	border-color: color-mix(in srgb, currentColor 45%, transparent);
	background-color: transparent;
	color: inherit;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.kit-bouton--contour:hover,
.kit-bouton--contour:focus {
	background-color: var(--wp--preset--color--principale-claire);
	color: var(--wp--preset--color--principale-foncee);
}

/* « Lien souligné » : un lien texte avec flèche, pour une action secondaire à côté d'un bouton. */
.wp-block-button.is-style-lien .wp-block-button__link {
	min-height: 48px;
	padding: 0.7em 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
}

.wp-block-button.is-style-lien .wp-block-button__link:hover,
.wp-block-button.is-style-lien .wp-block-button__link:focus {
	background-color: transparent;
	color: inherit;
	transform: none;
}

/* Largeur commune de l'en-tête, du pied de page et des sections : pleine largeur avec marges latérales. */

:root {
	--kit-largeur: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--gouttiere));
}

/* Bande d'information au-dessus de l'en-tête */

.kit-bandeau-haut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 34px;
	padding: 6px var(--wp--custom--gouttiere);
	background-color: var(--wp--preset--color--principale-foncee);
	color: var(--wp--preset--color--fond);
	font-size: 0.75rem;
	line-height: 1.4;
}

.kit-bandeau-haut p {
	margin: 0;
}

.kit-bandeau-haut__infos {
	margin-left: auto;
	text-align: right;
}

@media (max-width: 699px) {
	.kit-bandeau-haut__slogan {
		display: none;
	}

	.kit-bandeau-haut__infos {
		margin-right: auto;
		text-align: center;
	}
}

/* En-tête */

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background-color: var(--wp--preset--color--fond);
}

.site-header .inside-header {
	gap: 24px;
	max-width: var(--kit-largeur);
	padding-right: var(--wp--custom--gouttiere);
	padding-left: var(--wp--custom--gouttiere);
}

/* Le lien du logo occupe toute la hauteur de l'image (zone tactile). */
.site-logo a {
	display: block;
}

.site-logo img {
	width: auto;
	height: 70px;
	border-radius: calc(var(--wp--custom--arrondi) * 0.6);
}

.main-navigation,
.main-navigation ul ul {
	background-color: transparent;
}

.main-navigation .main-nav ul li a {
	color: var(--wp--preset--color--texte);
	font-family: var(--wp--preset--font-family--texte);
	font-size: 1rem;
	font-weight: 500;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
	color: var(--wp--preset--color--principale);
}

/* Un lien vers une ancre de l'accueil (« Services » → /#services) n'est pas une page active. */
.main-navigation .main-nav > ul > li.menu-item-type-custom[class*="current-menu-"] > a {
	color: var(--wp--preset--color--texte);
	box-shadow: none;
}

.main-navigation ul ul {
	padding: 8px;
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--arrondi);
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 14px 34px rgb(0 0 0 / 10%);
}

.main-navigation .main-nav ul ul li a {
	padding-top: 12px;
	padding-bottom: 12px;
	border-radius: calc(var(--wp--custom--arrondi) * 0.6);
	font-size: 0.95rem;
}

.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus {
	background-color: var(--wp--preset--color--principale-claire);
}

.main-navigation .menu-bar-items {
	align-items: center;
	gap: 16px;
	margin-left: 16px;
}

.main-navigation .menu-bar-items .kit-entete-tel {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 10px;
	padding: 4px 0;
	color: var(--wp--preset--color--texte);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

/* Pictogramme de téléphone dans une pastille, puis « Appelez-nous » et le numéro sur deux lignes. */
.kit-entete-tel__icone {
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--principale-claire);
}

.kit-entete-tel__icone::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--principale);
	-webkit-mask: var(--kit-telephone) center / contain no-repeat;
	mask: var(--kit-telephone) center / contain no-repeat;
}

.kit-entete-tel__libelle {
	color: var(--wp--preset--color--texte-doux);
	font-size: 0.75rem;
	font-weight: 500;
}

.kit-entete-tel__numero {
	color: var(--wp--preset--color--principale);
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.main-navigation .menu-bar-items .kit-entete-tel:hover .kit-entete-tel__numero,
.main-navigation .menu-bar-items .kit-entete-tel:focus .kit-entete-tel__numero {
	color: var(--wp--preset--color--principale-foncee);
	text-decoration: underline;
}

/* Entre 1 100 et 1 279 px, la place manque : on garde le numéro, sans la pastille ni la mention. */
@media (min-width: 1100px) and (max-width: 1279px) {
	.kit-entete-tel__icone,
	.kit-entete-tel__libelle {
		display: none;
	}
}

/* GeneratePress affiche les liens du menu en bloc et en graisse normale : on rétablit le bouton. */
.main-navigation .menu-bar-items .kit-bouton {
	display: inline-flex;
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
}

.kit-entete-devis__court {
	display: none;
}

/* Bouton « Menu » et menu déplié, sous la largeur du menu mobile (1 099 px, voir inc/en-tete.php). */
@media (max-width: 1099px) {
	.site-header .inside-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.site-logo img {
		height: 52px;
	}

	/* Mobile : le téléphone en bouton (pictogramme seul) ; « Contactez-nous » est dans la barre d'appel en bas. */
	.main-navigation.mobile-menu-control-wrapper .menu-bar-items .kit-entete-tel {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid var(--wp--preset--color--ligne);
		border-radius: var(--wp--custom--arrondi);
		background-color: var(--wp--preset--color--surface);
	}

	.mobile-menu-control-wrapper .kit-entete-tel__icone {
		width: auto;
		height: auto;
		background: none;
	}

	.mobile-menu-control-wrapper .kit-entete-tel__libelle,
	.mobile-menu-control-wrapper .kit-entete-tel__numero {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.main-navigation.mobile-menu-control-wrapper .menu-bar-items .kit-entete-devis {
		display: none;
	}

	.mobile-menu-control-wrapper .menu-bar-items {
		margin-right: 10px;
		margin-left: 0;
	}

	.mobile-menu-control-wrapper .kit-bouton {
		min-height: 48px;
		padding: 0.6em 1em;
		gap: 0.9em;
		font-size: 0.9rem;
	}

	/* Texte court à l'écran, texte complet pour les lecteurs d'écran. */
	.mobile-menu-control-wrapper .kit-entete-devis__long {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.mobile-menu-control-wrapper .kit-entete-devis__court {
		display: inline;
	}

	.main-navigation .menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle:hover,
	.mobile-menu-control-wrapper .menu-toggle:focus {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid var(--wp--preset--color--ligne);
		border-radius: var(--wp--custom--arrondi);
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--texte);
		line-height: 1;
	}

	/* Le mot « Menu » reste lisible par les lecteurs d'écran. */
	.menu-toggle .mobile-menu {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.menu-toggle .gp-icon svg {
		width: 22px;
		height: 22px;
	}

	.main-navigation.toggled .main-nav > ul {
		border-top: 1px solid var(--wp--preset--color--ligne);
	}

	.main-navigation.toggled .main-nav ul,
	.main-navigation.toggled .main-nav ul li,
	.main-navigation.toggled .main-nav ul li a {
		background-color: var(--wp--preset--color--fond);
	}

	.main-navigation.toggled .main-nav ul li a {
		line-height: 1.3;
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 1.0625rem;
	}

	.main-navigation.toggled .main-nav ul li {
		border-bottom: 1px solid var(--wp--preset--color--ligne);
	}

	.main-navigation.toggled .main-nav ul ul {
		padding: 0;
		border: 0;
		box-shadow: none;
	}
}

/* Très petits écrans : le bouton « Devis » reste dans la barre d'appel en bas. */
@media (max-width: 379px) {
	.mobile-menu-control-wrapper .kit-entete-devis {
		display: none;
	}
}

/* Fil d'Ariane (inc/fil-ariane.php) */

.kit-fil-ariane {
	max-width: var(--kit-largeur);
	margin: 0 auto;
	padding: 16px var(--wp--custom--gouttiere) 0;
	color: var(--wp--preset--color--texte-doux);
	font-size: 0.875rem;
}

.kit-fil-ariane ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kit-fil-ariane li + li::before {
	content: "/";
	margin: 0 12px;
	color: var(--wp--preset--color--ligne);
}

.kit-fil-ariane a {
	display: inline-block;
	padding: 10px 0;
	color: inherit;
	text-underline-offset: 3px;
}

.kit-fil-ariane a:hover,
.kit-fil-ariane a:focus {
	color: var(--wp--preset--color--principale);
}

/* Pied de page */

.kit-pied {
	background-color: var(--wp--preset--color--principale-foncee);
	color: color-mix(in srgb, var(--wp--preset--color--blanc) 80%, var(--wp--preset--color--principale-foncee));
	font-size: 0.95rem;
}

.kit-pied__interieur {
	max-width: var(--kit-largeur);
	margin: 0 auto;
	padding: clamp(28px, 3.5vw, 44px) var(--wp--custom--gouttiere) 20px;
}

.kit-pied a {
	color: inherit;
	text-decoration: none;
}

.kit-pied a:hover,
.kit-pied a:focus {
	color: var(--wp--preset--color--blanc);
	text-decoration: underline;
}

.kit-pied p {
	margin: 0 0 0.5em;
}

.kit-pied__grille {
	display: grid;
	gap: 28px 40px;
}

.kit-pied__logo {
	display: inline-block;
	margin-bottom: 12px;
}

.kit-pied__logo img {
	width: auto;
	height: 56px;
	border-radius: calc(var(--wp--custom--arrondi) * 0.6);
}

.kit-pied__slogan {
	max-width: 22em;
	font-size: 1rem;
}

.kit-pied__titre {
	margin-bottom: 0.4em;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--texte);
	font-size: 1rem;
	font-weight: 600;
}

.kit-pied .kit-pied__tel {
	display: inline-block;
	min-height: 44px;
	padding: 4px 0;
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.kit-pied .kit-pied__email {
	display: inline-block;
	min-height: 44px;
	padding: 10px 0;
	color: var(--wp--preset--color--blanc);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 4px;
}

.kit-pied__identite p:has(> .kit-pied__tel) {
	margin-bottom: 0;
}

.kit-pied__zone {
	font-size: 0.875rem;
}

.kit-pied__liens,
.kit-pied__liens-mentions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kit-pied__liens a,
.kit-pied__liens-mentions a {
	display: inline-block;
	min-height: 44px;
	padding: 10px 0;
}

/* Étoiles d'une note (modules/avis-google.php) : remplies au dixième près selon --kit-remplissage. */
.kit-etoiles {
	display: inline-block;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) var(--kit-remplissage, 100%), color-mix(in srgb, currentColor 22%, transparent) var(--kit-remplissage, 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 1.05em;
	letter-spacing: 2px;
	line-height: 1;
}

/* Badge d'avis sous les coordonnées du pied de page : note, étoiles et nombre d'avis, lien vers la fiche Google. */
.kit-badge-avis {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	margin: 14px 0 0;
	padding: 12px 16px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--fond) 25%, transparent);
	border-radius: var(--wp--custom--arrondi);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

a.kit-badge-avis:hover,
a.kit-badge-avis:focus {
	border-color: var(--wp--preset--color--accent);
}

.kit-badge-avis__note {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kit-badge-avis__note strong {
	color: var(--wp--preset--color--fond);
	font-size: 1.15rem;
}

.kit-badge-avis__nombre {
	font-size: 0.85rem;
}

/* Souris : lignes de liens resserrées. Écran tactile : zones de 44 px conservées. */
@media (pointer: fine) {
	.kit-pied__liens a,
	.kit-pied__liens-mentions a {
		min-height: 0;
		padding: 4px 0;
	}
}

.kit-pied__depuis {
	margin-top: 14px;
	color: color-mix(in srgb, var(--wp--preset--color--principale-claire) 65%, var(--wp--preset--color--principale-foncee));
	font-family: var(--wp--preset--font-family--titres);
	font-size: 2rem;
	font-weight: var(--wp--custom--titres--graisse);
	letter-spacing: var(--wp--custom--titres--espacement);
	line-height: 1;
}

.kit-pied__depuis span {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kit-pied__mentions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 32px;
	margin-top: 24px;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--blanc) 18%, var(--wp--preset--color--principale-foncee));
	font-size: 0.85rem;
}

.kit-pied__mentions p {
	margin: 0;
}

.kit-pied__liens-mentions {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}

@media (min-width: 760px) {
	.kit-pied__grille {
		grid-template-columns: repeat(2, 1fr);
	}

	.kit-pied__mentions nav {
		margin-left: auto;
	}
}

@media (min-width: 1100px) {
	.kit-pied__grille {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

/* Barre d'appel fixe en bas de l'écran, sous la largeur du menu mobile. */

.kit-barre-appel {
	display: none;
}

@media (max-width: 1099px) {
	.kit-barre-appel {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: 42fr 58fr;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background-color: var(--wp--preset--color--principale);
		box-shadow: 0 -5px 18px rgb(0 0 0 / 8%);
	}

	.kit-barre-appel--sans-tel {
		grid-template-columns: 1fr;
	}

	.kit-barre-appel a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 62px;
		padding: 0 12px;
		font-size: 0.95rem;
		font-weight: 600;
		text-decoration: none;
	}

	.kit-barre-appel__tel,
	.kit-barre-appel__tel:hover,
	.kit-barre-appel__tel:focus {
		background-color: var(--wp--preset--color--principale);
		color: var(--wp--preset--color--fond);
	}

	/* Combiné de téléphone dessiné avec la couleur du texte. */
	.kit-barre-appel__tel::before {
		content: "";
		width: 19px;
		height: 19px;
		background-color: currentColor;
		-webkit-mask: var(--kit-telephone) center / contain no-repeat;
		mask: var(--kit-telephone) center / contain no-repeat;
	}

	.kit-barre-appel__devis,
	.kit-barre-appel__devis:hover,
	.kit-barre-appel__devis:focus {
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--principale-foncee);
	}

	/* La barre ne doit pas masquer le bas du pied de page. */
	body {
		padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
	}
}

/*
 * En-tête sur une ligne (ordinateur) : logo, menu principal au centre (« Nos services » ouvre le grand menu),
 * puis le téléphone et le bouton de contact (.kit-entete-haut, inc/en-tete.php).
 */

.kit-entete-haut {
	display: none;
}

@media (min-width: 1100px) {
	.site-header .inside-header {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "logo nav haut";
		align-items: center;
		column-gap: 32px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.site-logo img {
		height: 64px;
	}

	.site-header .site-logo,
	.site-header .site-branding {
		grid-area: logo;
	}

	.site-header .main-navigation {
		grid-area: nav;
		justify-self: center;
	}

	.kit-entete-haut {
		display: flex;
		grid-area: haut;
		align-items: center;
		gap: 22px;
	}

	.kit-entete-haut .kit-entete-haut__contact {
		min-height: 50px;
		padding: 0.7em 1.2em;
		font-size: 0.95rem;
	}

	/* Numéro de téléphone mis en avant, avec son pictogramme, avant le bouton de contact. */
	.kit-entete-haut__tel {
		display: inline-flex;
		order: -1;
		align-items: center;
		gap: 10px;
		min-height: 46px;
		color: var(--wp--preset--color--principale-foncee);
		font-family: var(--wp--preset--font-family--titres);
		font-size: 1.2rem;
		font-weight: 700;
		letter-spacing: -0.02em;
		text-decoration: none;
		white-space: nowrap;
	}

	.kit-entete-haut__tel::before {
		content: "";
		flex: none;
		width: 20px;
		height: 20px;
		background-color: var(--wp--preset--color--principale);
		-webkit-mask: var(--kit-telephone) center / contain no-repeat;
		mask: var(--kit-telephone) center / contain no-repeat;
	}

	.kit-entete-haut__tel:hover,
	.kit-entete-haut__tel:focus {
		color: var(--wp--preset--color--principale);
	}

	/* Sur ordinateur, le contact et le téléphone sont dans .kit-entete-haut : on masque ceux de la barre du menu. */
	.main-navigation .menu-bar-items {
		display: none;
	}

	/* Liens prévus pour le menu mobile seulement (Contactez-nous). */
	.main-navigation .main-nav .kit-mobile-seulement {
		display: none;
	}

	.main-navigation .main-nav > ul > li > a {
		padding-right: 14px;
		padding-left: 14px;
		font-size: 1rem;
	}
}

/* Entre 1 100 et 1 279 px : le téléphone devient un bouton rond (le numéro reste lu par les lecteurs d'écran). */
@media (min-width: 1100px) and (max-width: 1279px) {
	.site-header .inside-header {
		column-gap: 20px;
	}

	.kit-entete-haut__tel {
		justify-content: center;
		width: 46px;
		border: 1px solid var(--wp--preset--color--ligne);
		border-radius: 50%;
		font-size: 0;
	}

	.main-navigation .main-nav > ul > li > a {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 0.95rem;
	}
}

/* « Nos offres d'emploi » (classe de menu kit-menu-emploi) : un point de couleur devant le lien. */
.main-navigation .main-nav li.kit-menu-emploi > a::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--principale);
	vertical-align: 0.1em;
}

/*
 * Grand menu « Nos services » (classe de menu kit-mega, inc/en-tete.php) : une bulle sous le lien, avec une flèche
 * pointée vers lui ; les services sur deux colonnes, la carte de contact à droite. Sur mobile : liste dépliable.
 */
@media (min-width: 1100px) {
	.main-navigation .main-nav ul li.kit-mega > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr)) 320px;
		gap: 4px 12px;
		width: min(940px, 92vw);
		margin-top: 12px;
		padding: 18px;
		border: 1px solid var(--wp--preset--color--ligne);
		border-radius: calc(var(--wp--custom--arrondi) * 1.6);
		background-color: var(--wp--preset--color--surface);
		box-shadow: 0 24px 50px rgb(16 59 40 / 16%);
	}

	/* Position de la bulle : la flèche, à 130 px de son bord gauche, tombe sous le milieu de « Nos services ». */
	.main-navigation:not(.toggled) .main-nav ul li.kit-mega:hover > ul.sub-menu,
	.main-navigation:not(.toggled) .main-nav ul li.kit-mega.sfHover > ul.sub-menu {
		left: calc(50% - 130px);
	}

	.main-navigation .main-nav ul li.kit-mega > ul.sub-menu::before {
		content: "";
		position: absolute;
		top: -9px;
		left: 121px;
		width: 16px;
		height: 16px;
		border-top: 1px solid var(--wp--preset--color--ligne);
		border-left: 1px solid var(--wp--preset--color--ligne);
		background-color: var(--wp--preset--color--surface);
		transform: rotate(45deg);
	}

	/* Pont invisible entre le lien et la bulle : la souris peut descendre sans refermer le menu. */
	.main-navigation .main-nav ul li.kit-mega::after {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: 14px;
	}

	.main-navigation .main-nav li.kit-mega > ul > li {
		width: auto;
	}

	.main-navigation .main-nav li.kit-mega > ul > li > a {
		display: flex;
		flex-direction: column;
		gap: 3px;
		padding: 12px 14px;
		border-radius: var(--wp--custom--arrondi);
		line-height: 1.3;
	}

	.main-navigation .main-nav li.kit-mega > ul > li.kit-specialite > a {
		background-color: var(--wp--preset--color--principale-claire);
	}

	.kit-mega__nom {
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--wp--preset--color--texte);
		font-size: 1rem;
		font-weight: 700;
	}

	.kit-mega__description {
		color: var(--wp--preset--color--texte-doux);
		font-size: 0.82rem;
		font-weight: 400;
	}

	.kit-mega__badge {
		padding: 2px 8px;
		border-radius: 99px;
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--principale-foncee);
		font-size: 0.7rem;
		font-weight: 700;
		white-space: nowrap;
	}

	/* Carte de contact : photo de la page Contact, voilée, texte et bouton par-dessus. */
	.main-navigation .main-nav li.kit-mega > ul > li.kit-mega__carte {
		position: relative;
		grid-row: 1 / span 4;
		grid-column: 3;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 10px;
		min-height: 290px;
		padding: 22px;
		overflow: hidden;
		border-radius: var(--wp--custom--arrondi);
		background-color: var(--wp--preset--color--principale-foncee);
		color: var(--wp--preset--color--fond);
	}

	.kit-mega__photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.main-navigation .main-nav li.kit-mega__carte::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(0deg, color-mix(in srgb, var(--wp--preset--color--principale-foncee) 94%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--principale-foncee) 70%, transparent) 55%, color-mix(in srgb, var(--wp--preset--color--principale-foncee) 30%, transparent) 100%);
	}

	.kit-mega__carte > :not(img) {
		position: relative;
		z-index: 2;
		margin: 0;
	}

	.kit-mega__surtitre {
		color: var(--wp--preset--color--accent);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.kit-mega__titre {
		font-family: var(--wp--preset--font-family--titres);
		font-size: 1.4rem;
		font-weight: 500;
		letter-spacing: -0.03em;
		line-height: 1.15;
	}

	.kit-mega__texte {
		color: color-mix(in srgb, var(--wp--preset--color--fond) 85%, transparent);
		font-size: 0.88rem;
		line-height: 1.45;
	}

	.main-navigation .main-nav li.kit-mega__carte a.kit-mega__bouton {
		display: flex;
		flex-direction: row;
		align-items: center;
		align-self: stretch;
		justify-content: space-between;
		min-height: 46px;
		padding: 0 16px;
		border-radius: var(--wp--custom--arrondi);
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--principale-foncee);
		font-size: 0.95rem;
		font-weight: 700;
	}
}

@media (min-width: 1100px) and (max-width: 1279px) {
	.main-navigation .main-nav ul li.kit-mega > ul.sub-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr)) 260px;
		width: 820px;
	}
}

@media (max-width: 1099px) {
	.kit-mega__carte,
	.kit-mega__description {
		display: none;
	}

	.kit-mega__nom {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.kit-mega__badge {
		padding: 1px 7px;
		border-radius: 99px;
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--principale-foncee);
		font-size: 0.68rem;
		font-weight: 700;
	}

	/* Services repliés sous « Nos services », avec un trait d'accent. */
	.main-navigation.toggled .main-nav li.kit-mega > ul.sub-menu {
		margin: 0 0 10px 14px;
		border-left: 2px solid var(--wp--preset--color--accent);
	}

	.main-navigation.toggled .main-nav li.kit-mega > ul > li {
		border-bottom: 0;
	}

	.main-navigation.toggled .main-nav li.kit-mega > ul > li > a {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 0.98rem;
	}
}

/*
 * Hauteurs utiles au premier écran : en-tête (valeur par défaut, remplacée par la vraie mesure dans assets/js/entete.js)
 * et barre d'appel fixe en bas de l'écran (mobile).
 */
:root {
	--kit-hauteur-entete: 100px;
	--kit-hauteur-barre-appel: calc(62px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1100px) {
	:root {
		--kit-hauteur-entete: 92px;
		--kit-hauteur-barre-appel: 0px;
	}
}

/*
 * En-tête posé sur la photo d'ouverture (classe kit-entete-sur-photo, voir inc/en-tete.php et assets/js/entete.js) :
 * transparent, textes blancs ; dès que la page défile (classe kit-entete-plein), un fond blanc descend lentement
 * derrière lui et les textes passent au vert. Menu mobile ouvert : fond blanc aussi.
 */

.kit-entete-sur-photo .site-header {
	margin-bottom: calc(-1 * var(--kit-hauteur-entete));
	background-color: transparent;
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--principale-foncee) 55%, transparent), transparent);
}

.kit-entete-sur-photo .site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--fond);
	box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 0.7s ease, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kit-entete-plein .site-header::before,
.kit-entete-sur-photo .site-header:has(.toggled)::before {
	opacity: 1;
	transform: none;
}

.kit-entete-sur-photo .site-header a {
	transition: color 0.6s ease, background-color 0.2s, transform 0.2s;
}

.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .main-navigation .main-nav > ul > li > a,
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__liens a:not(.kit-bouton),
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__tel {
	color: var(--wp--preset--color--fond);
	text-shadow: 0 1px 14px rgb(0 0 0 / 30%);
}

/* Survol et page en cours sur la photo : jaune. */
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .main-navigation .main-nav > ul > li > a:hover,
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .main-navigation .main-nav > ul > li > a:focus,
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .main-navigation .main-nav > ul > li[class*="current-menu-"] > a,
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__liens a:not(.kit-bouton):hover,
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__liens a:not(.kit-bouton):focus,
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__liens .current-menu-item > a:not(.kit-bouton),
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__tel:hover,
.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__tel:focus {
	color: var(--wp--preset--color--accent);
}

.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .main-navigation .main-nav > ul > li.menu-item-type-custom[class*="current-menu-"] > a:not(:hover):not(:focus) {
	color: var(--wp--preset--color--fond);
}

.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .main-navigation .main-nav li.kit-menu-emploi > a::before {
	background-color: var(--wp--preset--color--accent);
}

@media (min-width: 1100px) and (max-width: 1279px) {
	.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__tel {
		border-color: color-mix(in srgb, var(--wp--preset--color--fond) 45%, transparent);
	}
}

.kit-entete-sur-photo:not(.kit-entete-plein) .site-header:not(:has(.toggled)) .kit-entete-haut__tel::before {
	background-color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.kit-entete-sur-photo .site-header::before {
		transform: none;
		transition: opacity 0.3s linear;
	}
}

/* Survol des liens de l'en-tête : la couleur change en douceur. */
.site-header a {
	transition: color 0.25s ease;
}

/*
 * Lien de menu affiché en bouton (classe kit-menu-bouton, inc/en-tete.php) : mêmes règles que le bouton de contact,
 * qui l'emportent sur celles des liens texte du niveau 1.
 */
@media (min-width: 1100px) {
	.kit-entete-haut__liens ul {
		align-items: center;
	}

	.site-header .kit-entete-haut__liens a.kit-bouton,
	.kit-entete-sur-photo .site-header .kit-entete-haut__liens a.kit-bouton {
		display: inline-flex;
		color: var(--wp--preset--color--principale-foncee);
		font-weight: 600;
		text-shadow: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.kit-entete-sur-photo .site-header .inside-header {
		animation: kit-entree-haut 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
}

@keyframes kit-entree-haut {
	from {
		opacity: 0;
		transform: translateY(-18px);
	}
}