/* ==========================================================================
   Escale — thème
   Couleurs, polices et tailles : theme.json (modifiables dans Apparence › Éditeur › Styles).
   Ce fichier : comportements que theme.json ne sait pas exprimer.
   ========================================================================== */

:root {
	--esc-radius-s: var(--wp--custom--radius--petit, 6px);
	--esc-radius-m: var(--wp--custom--radius--moyen, 10px);
	--esc-radius-l: var(--wp--custom--radius--grand, 16px);
	--esc-ease: var(--wp--custom--courbe, cubic-bezier(.2, .7, .2, 1));
	--esc-fast: var(--wp--custom--duree--courte, 160ms);
	--esc-mid: var(--wp--custom--duree--moyenne, 260ms);
	--esc-slow: var(--wp--custom--duree--longue, 520ms);
	--esc-header-h: 4.25rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--esc-header-h) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: lining-nums;
	overflow-x: clip;
}

/* Les titres serif profitent de la taille optique de Newsreader. */
h1, h2, h3,
.wp-block-site-title {
	font-optical-sizing: auto;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--lagune-pale);
	color: var(--wp--preset--color--encre);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--lagune);
	outline-offset: 3px;
	border-radius: 4px;
}

img {
	max-width: 100%;
	height: auto;
}

/* Lien d'évitement (ajouté par WordPress) */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--encre);
	box-shadow: var(--wp--preset--shadow--flottant);
	border-radius: var(--esc-radius-m);
	padding: .75rem 1rem;
	z-index: 100000;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.esc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--fond) 92%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--esc-mid) var(--esc-ease), background-color var(--esc-mid) var(--esc-ease);
}

.admin-bar .esc-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .esc-header {
		top: 0;
	}
}

.esc-header.is-scrolled,
body:not(.home) .esc-header {
	border-bottom-color: var(--wp--preset--color--ligne);
}

.esc-header__bar {
	min-height: var(--esc-header-h);
}

.esc-header__brand .wp-block-site-title {
	white-space: nowrap;
}

.esc-header .esc-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	padding-block: .35rem;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--esc-mid) var(--esc-ease);
}

.esc-header .esc-nav .wp-block-navigation-item__content:hover,
.esc-header .esc-nav .current-menu-item > .wp-block-navigation-item__content {
	background-size: 100% 1px;
}

/* Menu mobile : panneau plein écran, ouverture en fondu. */
.esc-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--fond);
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
	animation: esc-fade-in var(--esc-mid) var(--esc-ease);
}

.esc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
	gap: 1.25rem;
}

.esc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.75rem;
	font-weight: 450;
}

.esc-nav .wp-block-navigation__responsive-container-open,
.esc-nav .wp-block-navigation__responsive-container-close {
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
}

@media (max-width: 599px) {
	.esc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}
}

.esc-nav .wp-block-navigation__responsive-container-close {
	display: inline-flex;
}

.esc-header .esc-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
}

.esc-nav .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--lagune-pale);
}

/* Sur ordinateur, « Inscrire mon établissement » prend la forme d'un lien discret encadré. */
@media (min-width: 600px) {
	.esc-nav .esc-nav__list > .wp-block-navigation-item__content {
		border: 1px solid var(--wp--preset--color--ligne);
		border-radius: 999px;
		padding: .5rem .95rem !important;
		background-image: none !important;
		transition: border-color var(--esc-fast) var(--esc-ease), background-color var(--esc-fast) var(--esc-ease);
	}

	.esc-nav .esc-nav__list > .wp-block-navigation-item__content:hover {
		border-color: var(--wp--preset--color--lagune);
		background-color: var(--wp--preset--color--surface);
	}
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--esc-fast) var(--esc-ease), color var(--esc-fast) var(--esc-ease), border-color var(--esc-fast) var(--esc-ease), transform var(--esc-fast) var(--esc-ease);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--encre);
	border: 1px solid var(--wp--preset--color--encre);
	padding: calc(.85rem - 1px) calc(1.4rem - 1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--surface);
}

/* --------------------------------------------------------------------------
   Listes, séparateurs, champs
   -------------------------------------------------------------------------- */

.is-style-plain {
	list-style: none;
	padding-left: 0;
}

.is-style-plain li + li {
	margin-top: .55rem;
}

.wp-block-search__input,
.wp-block-post-comments-form input:not([type=submit]),
.wp-block-post-comments-form textarea {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--esc-radius-m);
	background: var(--wp--preset--color--surface);
	padding: .75rem .9rem;
	font: inherit;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.esc-footer__title {
	letter-spacing: 0;
	font-weight: 600;
	margin-bottom: .9rem;
}

.esc-footer__links a {
	color: var(--wp--preset--color--ardoise);
	text-decoration: none;
	font-size: .9375rem;
}

.esc-footer__links a:hover {
	color: var(--wp--preset--color--encre);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.esc-footer__legal p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Images : apparition douce une fois chargées (chargement différé)
   -------------------------------------------------------------------------- */

.js img[loading="lazy"] {
	opacity: 0;
	transition: opacity var(--esc-slow) var(--esc-ease);
}

.js img[loading="lazy"].is-loaded {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Apparition au défilement — un seul mouvement, court, sur les éléments
   marqués .esc-reveal (sections, grilles de cartes).
   -------------------------------------------------------------------------- */

.js .esc-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--esc-slow) var(--esc-ease), transform var(--esc-slow) var(--esc-ease);
	transition-delay: calc(var(--esc-i, 0) * 70ms);
}

.js .esc-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@keyframes esc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.js .esc-reveal,
	.js img[loading="lazy"] {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Contenus
   -------------------------------------------------------------------------- */

.esc-main {
	min-height: 50vh;
}

.wp-block-post-content > * + h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-post-featured-image img {
	border-radius: var(--esc-radius-m);
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	gap: .5rem;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--esc-radius-m);
	text-decoration: none;
	color: var(--wp--preset--color--encre);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--surface);
}

/* Paragraphe d'avertissement des modèles de pages légales (éditeur et aperçu). */
.esc-legal-draft {
	padding: 1rem 1.25rem;
	border: 2px dashed #8A5300;
	border-radius: 10px;
	background: #FBF5E6;
}

/* Sections réutilisables : questions fréquentes, étapes, témoignage */
.esc-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--ligne);
	padding-block: 1rem;
}

.esc-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
}

.esc-faq__item[open] summary {
	margin-bottom: .5rem;
}

.esc-step__num {
	margin: 0;
	line-height: 1;
	color: var(--wp--preset--color--lagune);
}

.esc-testimonial blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.esc-testimonial cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	color: var(--wp--preset--color--ardoise);
}

/* Accueil illustré : léger dégradé sous le texte pour la lisibilité. */
.esc-hero:has(.wp-block-cover__image-background)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 65%);
	pointer-events: none;
}

.esc-hero .wp-block-cover__inner-container {
	z-index: 2;
}