/*
 * Pixel overrides, 2026-10-26
 * Corrections isolées, chargées après build/style-index.css.
 * Aucune couleur ni typo nouvelle : on réutilise currentColor et les styles existants.
 */

/* Focus clavier : style.scss retire tout contour avec !important.
   On le rend visible seulement au clavier (:focus-visible), jamais au clic. */
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
html [role="button"]:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
}

/* Flèches de carrousel rendues focusables par pixel-overrides.js */
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
	border-radius: 50%;
}

/* Grand titre de l'accueil : les <br> du contenu forcent des coupures
   pensées pour le bureau. Sur mobile, on laisse le navigateur équilibrer. */
@media screen and (max-width: 767px) {
	.hero h1 br {
		display: none;
	}

	.hero h1 {
		text-wrap: balance;
	}
}

/* reCAPTCHA v3 : le badge fixe chevauchait boutons et cartes.
   Google permet de le masquer si la mention ci-dessous accompagne les formulaires. */
.grecaptcha-badge {
	visibility: hidden !important;
}

.pixel-recaptcha-notice {
	margin: 1.2rem 0 0;
	font-size: 1.2rem;
	line-height: 1.5;
	color: inherit;
}

.pixel-recaptcha-notice a {
	font-size: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   Recherche du site (2026-10-26)
   Couleurs du thème seulement : nuit #193c5d, blanc, ciel #7ac2ea (survol des boutons v2).
   --pixel-header-h est tenu à jour par pixel-overrides.js (le header rétrécit au défilement).
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Nav resserrée pour faire place à la loupe */
header.header-main .header-main-columns nav ul.wp-block-navigation__container {
	gap: 4rem;
}

@media screen and (max-width: 1600px) {
	header.header-main .header-main-columns nav ul.wp-block-navigation__container {
		gap: 2.2rem;
	}
}

/* Bouton loupe : cercle au trait des boutons v1 */
.pixel-search-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	margin: 0;
	border: 1px solid #193c5d;
	border-radius: 50%;
	background-color: transparent;
	color: #193c5d;
	cursor: pointer;
	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.pixel-search-toggle:hover,
.pixel-search-toggle[aria-expanded="true"] {
	background-color: #193c5d;
	color: #ffffff;
}

.pixel-search-toggle__open,
.pixel-search-toggle__close {
	display: flex;
	transition: opacity 0.2s ease-out, transform 0.3s ease-out;
}

.pixel-search-toggle__close {
	position: absolute;
	opacity: 0;
	transform: rotate(-45deg) scale(0.8);
}

.pixel-search-toggle[aria-expanded="true"] .pixel-search-toggle__open {
	opacity: 0;
	transform: scale(0.8);
}

.pixel-search-toggle[aria-expanded="true"] .pixel-search-toggle__close {
	opacity: 1;
	transform: none;
}

.pixel-search-item {
	display: flex;
	align-items: center;
	list-style: none;
}

/* Sélecteur précis : le thème remet les marges des boutons du header à 0,
   et sans margin-left:auto le space-between laisse un grand vide de chaque côté. */
header.header-main .header-main-columns .pixel-search-toggle--mobile {
	display: none;
	margin-left: auto;
	margin-right: 2.4rem;
	align-self: center;
}

@media screen and (max-width: 1340px) {
	header.header-main .header-main-columns .pixel-search-toggle--mobile {
		display: inline-flex;
	}
}

/* Le menu mobile plein écran couvre tout : la loupe s'efface pendant qu'il est ouvert */
header.header-main.header-menu-open .pixel-search-toggle--mobile {
	opacity: 0;
	pointer-events: none;
}

/* Panneau : glisse de 10px sous le header, en bleu nuit */
.pixel-search-panel,
.pixel-search-backdrop {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--pixel-header-h, 14rem);
	z-index: 98;
}

.pixel-search-panel {
	background-color: #193c5d;
	color: #ffffff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s;
}

.pixel-search-panel__inner {
	padding: 5.6rem 7.8125vw;
}

.pixel-search-backdrop {
	bottom: 0;
	background-color: rgba(25, 60, 93, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}

html.pixel-search-open .pixel-search-panel,
html.pixel-search-open .pixel-search-backdrop {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

@media screen and (max-width: 1024px) {
	.pixel-search-panel__inner {
		padding: 3.2rem 7.8125vw 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pixel-search-panel,
	.pixel-search-backdrop,
	.pixel-search-toggle__open,
	.pixel-search-toggle__close {
		transition: none;
		transform: none;
	}
}

/* Champ : un seul trait en bas, qui s'épaissit au focus */
.pixel-search__form {
	margin: 0;
}

.pixel-search__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	transition: border-color 0.3s ease-out;
}

.pixel-search__field::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease-out;
}

.pixel-search__field:focus-within::after {
	transform: scaleX(1);
}

html .pixel-search__input,
html .pixel-search__input:focus,
html .pixel-search__input:focus-visible {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: 1.2rem 0 1.6rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: "Aleo", serif;
	font-weight: 600;
	font-size: clamp(2.4rem, 2.2vw, 3.6rem);
	line-height: 1.3;
	outline: none !important;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.pixel-search__input::placeholder {
	color: inherit;
	opacity: 0.6;
}

.pixel-search__input::-webkit-search-cancel-button,
.pixel-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
}

.pixel-search__clear,
.pixel-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0s linear 0.2s, background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.pixel-search__clear {
	border: 0;
}

.pixel-search__submit {
	border: 1px solid currentColor;
	margin-bottom: 0.4rem;
}

.pixel-search__field.has-content .pixel-search__clear,
.pixel-search__field.has-content .pixel-search__submit {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Survol : comme les boutons v2 dans le panneau nuit, v1 sur fond clair */
.pixel-search-panel .pixel-search__submit:hover {
	background-color: #7ac2ea;
	border-color: #7ac2ea;
	color: #ffffff;
}

.pixel-search__clear:hover {
	opacity: 0.7;
}

/* ==========================================================================
   Page de résultats
   ========================================================================== */

.pixel-search-results {
	padding: calc(var(--pixel-header-h, 14rem) + 8rem) 7.8125vw 12rem;
	color: #193c5d;
}

.pixel-search-results__head {
	max-width: 96rem;
	margin-bottom: 6.4rem;
}

h1.pixel-search-results__title {
	margin: 0 0 4rem;
	font-size: clamp(3.4rem, 3.4vw, 5.6rem);
	line-height: 1.2;
	text-wrap: balance;
	color: #193c5d;
}

.pixel-search-results .pixel-search__field {
	border-bottom-color: rgba(25, 60, 93, 0.4);
}

.pixel-search-results .pixel-search__submit:hover {
	background-color: #193c5d;
	border-color: #193c5d;
	color: #ffffff;
}

p.pixel-search-results__count,
p.pixel-search-results__message {
	margin: 2.4rem 0 0;
	font-size: clamp(1.6rem, 2.5vw, 1.8rem);
}

p.pixel-search-results__message {
	max-width: 64rem;
}

.pixel-search-results__list {
	max-width: 96rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(25, 60, 93, 0.2);
}

.pixel-search-result {
	border-bottom: 1px solid rgba(25, 60, 93, 0.2);
}

a.pixel-search-result__link {
	display: block;
	padding: 3.6rem 0;
	color: #193c5d;
	font-size: inherit;
	text-decoration: none;
}

.pixel-search-result__type {
	display: block;
	margin-bottom: 1.2rem;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

h2.pixel-search-result__title {
	margin: 0 0 1.2rem;
	font-size: clamp(2.4rem, 2vw, 3.2rem);
	line-height: 1.25;
	color: #193c5d;
	transition: color 0.3s ease-in-out;
}

p.pixel-search-result__excerpt {
	max-width: 72ch;
	margin: 0 0 2rem;
	font-size: clamp(1.6rem, 2.5vw, 1.8rem);
}

.pixel-search-result__excerpt mark {
	background: none;
	color: inherit;
	font-weight: 700;
}

.pixel-search-result__more {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-size: clamp(1.4rem, 2vw, 1.6rem);
	font-weight: 700;
}

.pixel-search-result__more .pixel-search__icon {
	transition: transform 0.3s ease-out;
}

a.pixel-search-result__link:hover .pixel-search-result__more .pixel-search__icon {
	transform: translateX(4px);
}

a.pixel-search-result__link:hover h2.pixel-search-result__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Pagination : pastilles au trait des boutons */
.pixel-search-results__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 5.6rem;
}

.pixel-search-results__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.4rem;
	height: 4.4rem;
	padding: 0 1.2rem;
	border: 1px solid #193c5d;
	border-radius: 2.2rem;
	color: #193c5d;
	font-size: 1.6rem;
	font-weight: 700;
	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.pixel-search-results__pagination a.page-numbers:hover,
.pixel-search-results__pagination .page-numbers.current {
	background-color: #193c5d;
	color: #ffffff;
}

.pixel-search-results__pagination .page-numbers.dots {
	border-color: transparent;
}

.pixel-search__flip {
	display: inline-flex;
	transform: scaleX(-1);
}

/* ==========================================================================
   Header mobile et tablette (≤ 1340px, menu hamburger)
   Le thème garde les tailles bureau du logo jusqu'à 1340px (conteneur 17,4 %, logo 10vw
   une fois défilé) et un header très haut. GSAP écrit max-width et padding en ligne
   au défilement : d'où les !important. data-scrolled est posé par le thème.
   ========================================================================== */
@media screen and (max-width: 1340px) {
	header.header-main {
		padding-top: 2.4rem !important;
		padding-bottom: 2.4rem !important;
	}

	header.header-main[data-scrolled="true"] {
		padding-top: 1.4rem !important;
		padding-bottom: 1.4rem !important;
	}

	header.header-main .header-main-columns {
		align-items: center;
	}

	header.header-main .header-main-columns .wp-block-site-logo {
		max-width: 60%;
	}

	header.header-main .header-main-columns .wp-block-site-logo a img {
		width: 100% !important;
		max-width: 220px !important;
		transition: max-width 0.4s ease-out;
	}

	header.header-main[data-scrolled="true"] .header-main-columns .wp-block-site-logo a img {
		max-width: 180px !important;
	}
}

@media screen and (max-width: 768px) {
	header.header-main .header-main-columns .wp-block-site-logo a img {
		max-width: 190px !important;
	}

	header.header-main[data-scrolled="true"] .header-main-columns .wp-block-site-logo a img {
		max-width: 160px !important;
	}
}