/*==================================================
EVER THEME
Pages
Version 2.1.0

Styles des classes utilisées par les modèles de pages
(contact, prendre RDV, 404, maintenance, accueil, articles)
qui n'avaient aucune règle CSS.
Utilise uniquement les variables de 01-variables.css.
==================================================*/

/* ESPACE SOUS LE HEADER FIXE
==================================================*/

.ever-main {
	padding-top: calc(var(--header-height) + var(--space-5));
}

.ever-home .ever-main {
	padding-top: 0;
}

.ever-hero {
	padding-top: calc(var(--header-height) + var(--space-8));
}

/* EN-TÊTE DE PAGE
==================================================*/

.ever-page-header__eyebrow {
	margin: 0 0 var(--space-4);

	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);

	letter-spacing: 0.22em;
	text-transform: uppercase;

	color: var(--color-primary);
}

.ever-container--small {
	width: min(640px, calc(100% - 48px));
	margin-inline: auto;
}

/* ACCUEIL : visuel de remplacement
==================================================*/

.ever-hero__placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;

	background:
		radial-gradient(
			circle at 28% 22%,
			var(--color-surface) 0,
			transparent 46%
		),
		linear-gradient(
			160deg,
			var(--color-secondary),
			var(--color-primary-light)
		);

	border-radius:
		var(--radius-xl)
		var(--radius-xl)
		180px
		var(--radius-xl);

	box-shadow: var(--shadow-md);
}

/* CONTACT + PRENDRE RDV : mise en page 2 colonnes
==================================================*/

.ever-contact-layout,
.ever-booking-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--space-9);

	align-items: start;
}

.ever-contact-content,
.ever-booking-content {
	max-width: 520px;
}

/* CONTACT : coordonnées
==================================================*/

.ever-contact-detail {
	margin-top: var(--space-6);
	padding-top: var(--space-5);

	border-top: 1px solid var(--color-border);
}

.ever-contact-detail__label,
.ever-booking-info__label {
	margin: 0 0 var(--space-1);

	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);

	letter-spacing: 0.18em;
	text-transform: uppercase;

	color: var(--color-text-light);
}

.ever-contact-detail__value {
	margin: 0;

	font-family: var(--font-heading);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);

	color: var(--color-primary-dark);
	text-decoration: none;

	transition: color var(--transition-fast);
}

a.ever-contact-detail__value:hover {
	color: var(--color-primary);
}

/* CONTACT : carte du formulaire
   Le formulaire Contact Form 7 est déjà habillé par 15-contact.css ;
   ici on évite la double carte (carte dans la carte).
==================================================*/

.ever-card--form,
.ever-card--booking {
	height: auto;
	padding: var(--space-7);
}

.ever-contact-form__title {
	margin-bottom: var(--space-5);
}

.ever-card--form .wpcf7 {
	max-width: none;
	padding: 0;

	background: none;

	border: 0;
	border-radius: 0;

	box-shadow: none;
}

/* PRENDRE RDV
==================================================*/

.ever-booking-info {
	display: grid;
	gap: var(--space-4);

	margin-block: var(--space-6);
}

.ever-booking-info__item {
	padding: var(--space-5);

	background: var(--color-surface);

	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.ever-booking-info__text {
	margin: 0;

	font-size: 16px;
	line-height: var(--lh-normal);

	color: var(--color-text);
}

.ever-booking-calendar__content iframe {
	display: block;

	width: 100%;
	min-height: 640px;

	border: 0;
}

.ever-booking-calendar__empty {
	padding: var(--space-8) var(--space-5);

	text-align: center;

	color: var(--color-text-light);
	background: var(--color-hover);

	border: 1px dashed var(--color-primary-light);
	border-radius: var(--radius-md);
}

/* CONTENU ÉDITORIAL (éditeur WordPress)
==================================================*/

.ever-entry-content > * + * {
	margin-top: var(--space-5);
}

.ever-entry-content a {
	color: var(--color-primary);

	text-decoration: underline;
	text-underline-offset: 3px;
}

.ever-entry-content a:hover {
	color: var(--color-primary-dark);
}

.ever-entry-content ul,
.ever-entry-content ol {
	padding-left: 1.4em;
}

.ever-entry-content img {
	border-radius: var(--radius-md);
}

.ever-page__content,
.ever-single__featured,
.ever-page__featured-image {
	width: min(var(--content), calc(100% - 48px));
	margin-inline: auto;
}

.ever-page__featured-image img,
.ever-single__featured img {
	width: 100%;

	border-radius: var(--radius-lg);
}

/* FIL D'ARIANE
==================================================*/

.ever-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);

	margin-bottom: var(--space-5);

	font-size: var(--fs-xs);

	color: var(--color-text-light);
}

.ever-breadcrumb a {
	color: var(--color-primary);
	text-decoration: none;
}

/* ARTICLES : métadonnées
==================================================*/

.ever-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);

	font-size: var(--fs-xs);

	color: var(--color-text-light);
}

.ever-post-meta__separator {
	opacity: 0.5;
}

.ever-post-categories,
.ever-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.ever-post-categories a,
.ever-post-tags a {
	padding: 4px 12px;

	font-size: var(--fs-xs);
	text-decoration: none;

	color: var(--color-primary-dark);
	background: var(--color-secondary);

	border-radius: var(--radius-round);

	transition: background var(--transition-fast);
}

.ever-post-categories a:hover,
.ever-post-tags a:hover {
	background: var(--color-primary-light);
}

.ever-post-thumbnail img {
	width: 100%;

	border-radius: var(--radius-md);
}

.ever-post-navigation__previous,
.ever-post-navigation__next {
	flex: 1;
}

.ever-post-navigation__next {
	text-align: right;
}

.ever-edit-link {
	font-size: var(--fs-xs);
}

/* 404 + MAINTENANCE
==================================================*/

.ever-error-404,
.ever-maintenance {
	display: flex;
	align-items: center;

	min-height: calc(100vh - var(--header-height));

	padding-block: var(--space-9);

	overflow: hidden;
}

.ever-error-404__inner,
.ever-maintenance__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--space-9);

	align-items: center;
}

.ever-error-404__number {
	margin: 0 0 var(--space-3);

	font-family: var(--font-heading);
	font-size: clamp(96px, 14vw, 180px);
	line-height: 1;

	color: var(--color-primary-light);
}

.ever-error-404__eyebrow,
.ever-maintenance__eyebrow {
	margin: 0 0 var(--space-4);

	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);

	letter-spacing: 0.22em;
	text-transform: uppercase;

	color: var(--color-primary);
}

.ever-error-404__title,
.ever-maintenance__title {
	margin: 0 0 var(--space-5);

	font-size: clamp(36px, 4.5vw, 58px);
}

.ever-error-404__text,
.ever-maintenance__text {
	max-width: 520px;

	color: var(--color-text-light);
}

.ever-error-404__actions,
.ever-maintenance__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);

	margin-top: var(--space-6);
}

.ever-maintenance__logo {
	margin-bottom: var(--space-6);
}

.ever-maintenance__site-name {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);

	color: var(--color-primary-dark);
	text-decoration: none;
}

/* Décor lune + étoiles */

.ever-error-404__visual {
	justify-self: center;

	width: min(380px, 80vw);
}

.ever-error-404__circle,
.ever-maintenance__decoration {
	position: relative;

	width: min(380px, 80vw);
	aspect-ratio: 1;

	justify-self: center;

	background:
		radial-gradient(
			circle at 30% 28%,
			var(--color-surface) 0,
			transparent 48%
		),
		linear-gradient(
			150deg,
			var(--color-secondary),
			var(--color-primary-light)
		);

	border-radius: 50%;

	box-shadow: var(--shadow-md);
}

.ever-error-404__star,
.ever-maintenance__star {
	position: absolute;

	font-size: 26px;
	line-height: 1;

	color: var(--color-primary);
}

.ever-error-404__star--1,
.ever-maintenance__star--1 {
	top: 16%;
	left: 20%;
}

.ever-error-404__star--2,
.ever-maintenance__star--2 {
	top: 30%;
	right: 16%;

	font-size: 20px;
}

.ever-error-404__star--3,
.ever-maintenance__star--3 {
	bottom: 20%;
	left: 28%;

	font-size: 20px;
}

.ever-error-404__moon,
.ever-maintenance__moon {
	position: absolute;
	top: 50%;
	left: 50%;

	font-size: 120px;
	line-height: 1;

	color: var(--color-primary-dark);

	transform: translate(-50%, -50%);
}

/* RESPONSIVE
==================================================*/

@media (max-width: 1024px) {

	.ever-main {
		padding-top: calc(88px + var(--space-4));
	}

	.ever-hero {
		padding-top: calc(88px + var(--space-6));
	}

	.ever-contact-layout,
	.ever-booking-layout,
	.ever-error-404__inner,
	.ever-maintenance__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.ever-contact-content,
	.ever-booking-content,
	.ever-error-404__text,
	.ever-maintenance__text {
		max-width: none;
	}

}

@media (max-width: 480px) {

	.ever-card--form,
	.ever-card--booking {
		padding: var(--space-5);
	}

	.ever-error-404__moon,
	.ever-maintenance__moon {
		font-size: 90px;
	}

}

/* TEXTES D'INTRODUCTION
   .ever-text-lg faisait 30 px (taille d'un titre) et le paragraphe
   était collé au titre au-dessus.
==================================================*/

.ever-section .ever-text-lg {
	font-size: var(--fs-md) !important;
	line-height: var(--lh-relaxed);
}

.ever-section h2 + p,
.ever-section h2 + .ever-text-lg {
	margin-top: var(--space-4);
}