/*
 * Fichier : intemporris-pages.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * Les pages simples du site : une page d'information, une page d'aide, une
 * page qui n'a que son titre, la page introuvable. Le titre et son filet, le
 * texte dans la colonne de lecture du thème, et une lueur d'ardoise très
 * basse derrière la tête de page.
 * Les pages de la boutique et l'accueil ne sont pas concernées. Seul
 * l'article de la page est visé, enfant direct de la zone principale : une
 * publication listée dans une page ne reçoit rien.
 *
 * Couleur :
 *   Une page simple n'appartient à aucun domaine : elle prend l'ardoise du
 *   site, pour les filets et la lueur. Le texte reste blanc ou gris.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - L'ordre de lecture reste celui du balisage.
 *   - Un lien se reconnaît à son soulignement, pas à sa seule couleur.
 */

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry {
	--intemporris-page: color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 30%, #7e8693);
	--intemporris-page-filet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 14%, transparent);
	--intemporris-page-filet-accent: color-mix(in srgb, var(--intemporris-page) 55%, transparent);
	position: relative;
	padding-block-end: var(--discovery-space-16, 4rem);
}

/* La lueur : une seule, basse, derrière le titre. Elle défile avec la page,
   ne porte aucun texte et s'éteint sous prefers-contrast: more. */
body.page:not(.home, .woocommerce-page) {
	overflow-x: clip;
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -6rem auto;
	inset-inline: calc(50% - 50vw);
	block-size: 40rem;
	pointer-events: none;
	background: radial-gradient(ellipse 48rem 26rem at 14% 16rem, color-mix(in srgb, var(--intemporris-page) 15%, transparent), transparent 72%);
	-webkit-mask-image: linear-gradient(transparent, var(--intemporris-masque, #000) 10rem, var(--intemporris-masque, #000) 60%, transparent);
	mask-image: linear-gradient(transparent, var(--intemporris-masque, #000) 10rem, var(--intemporris-masque, #000) 60%, transparent);
}

@media (prefers-contrast: more) {

	body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry::before {
		display: none;
	}
}

/* La tête de page : le titre, puis un filet qui part de l'ardoise et se
   perd vers la droite. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-header {
	position: relative;
	margin-block-end: var(--discovery-space-8, 2rem);
	padding-block-end: var(--discovery-space-5, 1.25rem);
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1.5px;
	background: linear-gradient(90deg, var(--intemporris-page), var(--intemporris-page-filet-accent) 40%, transparent 85%);
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-header .discovery-entry-title {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
	font-weight: var(--discovery-weight-bold, 700);
	letter-spacing: -0.025em;
	line-height: 1.05;
}

/* Le texte garde la colonne de lecture du thème. Il se lit un peu adouci,
   avec un interligne large. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content > :is(p, ul, ol) {
	color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 88%, var(--discovery-color-muted, #b3b3b3));
	line-height: 1.7;
}

/* Un paragraphe vide laissé par l'éditeur ne prend pas de place. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content > p:empty {
	display: none;
}

/* Une tête de section : un court filet d'ardoise dessous. Elle garde
   l'alignement que l'éditeur lui a donné, et le filet le suit. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content > h2 {
	margin-block: var(--discovery-space-10, 2.5rem) var(--discovery-space-4, 1rem);
	font-size: var(--discovery-text-xl, 1.25rem);
	letter-spacing: -0.02em;
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content > h2::after {
	content: "";
	display: block;
	inline-size: var(--discovery-space-8, 2rem);
	block-size: 1px;
	margin-block-start: var(--discovery-space-3, 0.75rem);
	background: var(--intemporris-page-filet-accent);
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content > h2.has-text-align-center::after {
	margin-inline: auto;
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content > h2.has-text-align-right::after {
	margin-inline-start: auto;
}

/* Un lien se reconnaît à son soulignement d'ardoise ; le texte reste clair. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content > :is(p, ul, ol) a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-line: underline;
	text-decoration-color: var(--intemporris-page);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* Quand le contenu de la page s'ouvre à la largeur ample, la tête de page
   la suit, pour rester alignée avec lui. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry:has(> .discovery-entry-content > .alignwide) > .discovery-entry-header {
	max-inline-size: var(--discovery-large-max, 60rem);
}


/* Les formulaires d'une page : une plaque sombre, les champs en verre aux
   coins arrondis, la commande en capsule. Rien n'est déplacé : l'ordre des
   libellés, des champs et des aides reste celui du balisage. Le formulaire
   de la fenêtre de discussion d'Emma n'est pas concerné : il a son propre
   habillage. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) {
	max-inline-size: 46rem;
	margin-block: var(--discovery-space-6, 1.5rem);
	padding: var(--discovery-space-5, 1.25rem) var(--discovery-space-6, 1.5rem);
	border: 1px solid var(--intemporris-page-filet);
	border-radius: var(--discovery-radius-lg, 1rem);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 4%, transparent), transparent 40%),
		color-mix(in srgb, var(--intemporris-page) 6%, var(--discovery-color-background, #000000));
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) :is(p, .gdrf-field) {
	margin: 0 0 var(--discovery-space-4, 1rem);
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) label,
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) #gdrf-radio-label {
	display: block;
	margin-block-end: var(--discovery-space-2, 0.5rem);
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-semibold, 600);
}

/* Un champ de saisie. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) :is(input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"], textarea) {
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-4, 1rem);
	border: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 46%, var(--discovery-color-background, #000000));
	border-radius: var(--discovery-radius-md, 0.5rem);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 5%, transparent), transparent 60%),
		var(--discovery-color-background, #000000);
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
	transition: border-color var(--discovery-duration-normal, 240ms);
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) :is(input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"], textarea):hover {
	border-color: var(--discovery-color-text, #ffffff);
}

/* Les choix : la pastille prend l'ardoise, le libellé reste en clair. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) input[type="radio"],
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) input[type="checkbox"] {
	accent-color: var(--intemporris-page);
	margin-inline-end: var(--discovery-space-2, 0.5rem);
	margin-block: var(--discovery-space-2, 0.5rem);
}

/* Un choix et son libellé sur une même ligne. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) :is(input[type="radio"], input[type="checkbox"]) + label {
	display: inline;
	margin: 0;
	font-weight: var(--discovery-weight-normal, 400);
	line-height: 1.5;
}

/* Une aide sous un champ : grise, plus petite, collée à son champ. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) .rle-ss-verification-aide {
	margin-block: calc(var(--discovery-space-2, 0.5rem) * -1) var(--discovery-space-5, 1.25rem);
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-sm, 0.875rem);
}

/* La commande : une capsule de verre d'ardoise, au contour net, à 3 pour 1
   au moins. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) :is(button[type="submit"], input[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-6, 1.5rem);
	border: 1px solid color-mix(in srgb, var(--intemporris-page) 85%, transparent);
	border-radius: var(--discovery-radius-full, 9999px);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 12%, transparent), transparent 55%),
		color-mix(in srgb, var(--intemporris-page) 30%, var(--discovery-color-background, #000000));
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
	font-weight: var(--discovery-weight-semibold, 600);
	cursor: pointer;
	transition: background-color var(--discovery-duration-normal, 240ms), border-color var(--discovery-duration-normal, 240ms);
}

body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) :is(button[type="submit"], input[type="submit"]):is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--intemporris-page) 44%, var(--discovery-color-background, #000000));
}

/* Le texte d'introduction d'un module se lit comme le texte de la page. */
body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content .rle-ss-verification-intro p {
	margin: 0 0 var(--discovery-space-4, 1rem);
	color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 88%, var(--discovery-color-muted, #b3b3b3));
	line-height: 1.7;
}

@media (prefers-contrast: more) {

	body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) {
		background: var(--discovery-color-background, #000000);
	}
}

@media (prefers-reduced-motion: reduce) {

	body.page:not(.home, .woocommerce-page) .discovery-main > .discovery-entry > .discovery-entry-content form:not(.rle-ea-fenetre form) :is(input, textarea, button) {
		transition: none;
	}
}


/* La page introuvable */

/* La page introuvable prend l'habillage des pages simples : le titre et son
   filet, le message dans la colonne de lecture. Derrière la tête, les ondes
   du logo, très pâles, s'éloignent sans rien trouver : un signal perdu. Le
   formulaire de recherche prend le champ de verre et la capsule des pages
   simples, dans la colonne de lecture ; sa disposition reste celle du
   thème. */
body.error404 {
	overflow-x: clip;
}

body.error404 .discovery-main > .discovery-error-404 {
	--intemporris-page: color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 30%, #7e8693);
	--intemporris-page-filet-accent: color-mix(in srgb, var(--intemporris-page) 55%, transparent);
	position: relative;
	padding-block-end: var(--discovery-space-16, 4rem);
}

body.error404 .discovery-main > .discovery-error-404::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -6rem auto;
	inset-inline: calc(50% - 50vw);
	block-size: 36rem;
	pointer-events: none;
	background:
		radial-gradient(circle at 8% 13rem, transparent 17.85rem, color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 55%, transparent) 18rem, transparent 18.2rem),
		radial-gradient(circle at 8% 13rem, transparent 25.85rem, color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 40%, transparent) 26rem, transparent 26.2rem),
		radial-gradient(circle at 8% 13rem, transparent 33.85rem, color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 26%, transparent) 34rem, transparent 34.2rem),
		radial-gradient(ellipse 48rem 26rem at 14% 16rem, color-mix(in srgb, var(--intemporris-page) 14%, transparent), transparent 72%);
	-webkit-mask-image: linear-gradient(90deg, var(--intemporris-masque, #000) 20%, transparent 70%), linear-gradient(transparent, var(--intemporris-masque, #000) 8rem, var(--intemporris-masque, #000) 60%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, var(--intemporris-masque, #000) 20%, transparent 70%), linear-gradient(transparent, var(--intemporris-masque, #000) 8rem, var(--intemporris-masque, #000) 60%, transparent);
	mask-composite: intersect;
}

@media (prefers-contrast: more) {

	body.error404 .discovery-main > .discovery-error-404::before {
		display: none;
	}
}

body.error404 .discovery-main > .discovery-error-404 > .discovery-error-404-header {
	position: relative;
	max-inline-size: var(--discovery-lecture-max, 42rem);
	margin-block-end: var(--discovery-space-8, 2rem);
	padding-block-end: var(--discovery-space-5, 1.25rem);
}

body.error404 .discovery-main > .discovery-error-404 > .discovery-error-404-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1.5px;
	background: linear-gradient(90deg, var(--intemporris-page), var(--intemporris-page-filet-accent) 40%, transparent 85%);
}

body.error404 .discovery-main > .discovery-error-404 .discovery-error-404-title {
	font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
	font-weight: var(--discovery-weight-bold, 700);
	letter-spacing: -0.025em;
	line-height: 1.05;
}

body.error404 .discovery-main > .discovery-error-404 .discovery-error-404-message {
	max-inline-size: var(--discovery-lecture-max, 42rem);
	color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 88%, var(--discovery-color-muted, #b3b3b3));
	line-height: 1.7;
}

/* La recherche : la ligne du thème, ramenée à la colonne de lecture. */
body.error404 .discovery-main > .discovery-error-404 .discovery-search-form {
	max-inline-size: var(--discovery-lecture-max, 42rem);
	margin-block-start: var(--discovery-space-6, 1.5rem);
}

/* Le champ : du verre aux coins arrondis, au contour à 3 pour 1. */
body.error404 .discovery-main > .discovery-error-404 .discovery-search-field {
	box-sizing: border-box;
	min-block-size: 2.75rem;
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-4, 1rem);
	border: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 46%, var(--discovery-color-background, #000000));
	border-radius: var(--discovery-radius-md, 0.5rem);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 5%, transparent), transparent 60%),
		var(--discovery-color-background, #000000);
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
	transition: border-color var(--discovery-duration-normal, 240ms);
}

body.error404 .discovery-main > .discovery-error-404 .discovery-search-field::placeholder {
	color: var(--discovery-color-muted, #b3b3b3);
	opacity: 1;
}

body.error404 .discovery-main > .discovery-error-404 .discovery-search-field:hover {
	border-color: var(--discovery-color-text, #ffffff);
}

/* La commande : la capsule de verre d'ardoise des pages simples. */
body.error404 .discovery-main > .discovery-error-404 .discovery-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-6, 1.5rem);
	border: 1px solid color-mix(in srgb, var(--intemporris-page) 85%, transparent);
	border-radius: var(--discovery-radius-full, 9999px);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 12%, transparent), transparent 55%),
		color-mix(in srgb, var(--intemporris-page) 30%, var(--discovery-color-background, #000000));
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
	font-weight: var(--discovery-weight-semibold, 600);
	cursor: pointer;
	transition: background-color var(--discovery-duration-normal, 240ms), border-color var(--discovery-duration-normal, 240ms);
}

body.error404 .discovery-main > .discovery-error-404 .discovery-search-submit:is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--intemporris-page) 44%, var(--discovery-color-background, #000000));
}

@media (prefers-reduced-motion: reduce) {

	body.error404 .discovery-main > .discovery-error-404 :is(.discovery-search-field, .discovery-search-submit) {
		transition: none;
	}
}