/* Inner pages: text pages (conseil), FAQ accordions, store and contact with the coordinates block, 404. */

/* main.page, not .page: WordPress also gives <body> the page class. Full-width box with the content box of .contenu, so
   the wrapper can clip at the window edge what hangs past the content (the title watermark).
   --mesure: the text column, never narrower than 46rem, then 73ch of the t1 text (1ch = 0.4966em in Source Sans 3, so
   73ch = 36.25 × t1; written from the t1 token because a ch inside a custom property resolves in the font of each
   element that uses it) as the type grows above 1 440 px.
   --groupe: the width of the page's own composition (text column, plus its table of contents or coordinates block).
   Above 1 440 px the content box narrows to it, centred in the content width: --decalage grows with the gained width
   (0 up to 1 440 px, so nothing moves there) until the group is centred. Lists of articles keep the whole width. */
main.page {
	--mesure: max(46rem, var(--wp--preset--font-size--t-1) * 36.25);
	--marge: calc(16rem + var(--gain) * .2182);
	--ecart: calc(64px + var(--gain) * .0727);
	--groupe: var(--mesure);
	--decalage: clamp(0px, (var(--largeur) - var(--groupe)) / 2, var(--gain));
	width: auto;
	padding-block: 40px 8px;
	padding-inline: calc(max(var(--g), (100% - var(--largeur)) / 2) + var(--decalage));
}

main.page:has(.page-corps.a-sommaire) {
	--groupe: calc(var(--marge) + var(--ecart) + var(--mesure));
}

main.page.liste-articles {
	--groupe: var(--largeur);
}

@media (min-width: 900px) {
	main.page {
		padding-block: 72px 16px;
	}
}

.page > h1 {
	max-width: calc(50 * var(--rem));
	margin: 0 0 32px;
	font-size: var(--wp--preset--font-size--t-5);
}

.page-corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.page-corps > * {
	margin: 0;
}

.page .wp-block-post-content,
.page-404 .page-corps {
	max-width: var(--mesure);
	font-size: var(--wp--preset--font-size--t-1);
}

.page .wp-block-post-content > *,
.page-404 .page-corps > * {
	margin-block: 0;
}

.page .wp-block-post-content > * + *,
.page-404 .page-corps > * + * {
	margin-top: 1.25rem;
}

.page .wp-block-post-content > h2 {
	margin-top: 3.5rem;
	font-size: var(--wp--preset--font-size--t-3);
	scroll-margin-top: calc(var(--hh) + 16px);
}

.page .wp-block-post-content > h3 {
	margin-top: 2.25rem;
}

.page .wp-block-post-content > h2 + *,
.page .wp-block-post-content > h3 + * {
	margin-top: 1rem;
}

.page .wp-block-post-content :where(ul, ol) {
	padding-left: 1.5rem;
}

.page .wp-block-post-content li + li {
	margin-top: .5rem;
}

.page .wp-block-post-content a {
	text-decoration-thickness: 1px;
}

.page .wp-block-post-content a:hover {
	text-decoration-thickness: 2px;
}

/* A table wider than the screen scrolls sideways. The edge shadows stay put (scroll) under white layers that travel
   with the table (local): a shadow shows only while there is more to see on its side, without any script. */
.wp-block-table {
	overflow-x: auto;
	background:
		linear-gradient(to right, var(--blanc) 30%, rgb(255 255 255 / 0)) left center / 48px 100% no-repeat local,
		linear-gradient(to left, var(--blanc) 30%, rgb(255 255 255 / 0)) right center / 48px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgb(62 80 99 / .35), rgb(62 80 99 / 0)) left center / 16px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgb(62 80 99 / .35), rgb(62 80 99 / 0)) right center / 16px 100% no-repeat scroll;
}

/* Design system § 6.10: slate rule under the header, grey-blue lines between rows, figures aligned. */
.wp-block-table td,
.wp-block-table th {
	border: 0;
	border-bottom: 1px solid var(--gris-bleu);
	text-align: left;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}

.wp-block-table thead,
.wp-block-table table:not(:has(thead)) tr:first-child:has(> th + th) > * {
	border-bottom: 2px solid var(--ardoise);
}

.wp-block-table caption,
.wp-block-table figcaption {
	padding: 8px 12px;
	background: var(--gris);
	color: var(--ardoise);
}

/* Forminator hides its form inline until its script has run: shown at once, it no longer delays the page's largest
   paint (contact, 3.2 s). Its fields are styled by this theme, not by the plugin's script. */
.forminator-ui.forminator-custom-form[style*="display: none"] {
	display: block !important;
}

/* .deborde is set by apparitions.js; the region's name already says it to screen readers. The hint comes before the
   table, so it is read before the cut-off columns (N-19). */
@media (max-width: 767.98px) {
	.wp-block-table.deborde::before {
		content: "Faites glisser →" / "";
		position: sticky;
		left: 0;
		display: block;
		padding-bottom: 8px;
		font: 600 calc(.875 * var(--rem))/1.4 var(--f-titre);
		color: var(--ardoise);
	}
}

/* Table of contents built on the server (inc/table-of-contents.php). */
.sommaire {
	padding: 20px 20px 12px;
	border-left: 3px solid var(--bleu);
	border-radius: 0 8px 8px 0;
	background: var(--gris);
	font-size: calc(1 * var(--rem));
}

.sommaire-titre {
	margin: 0 0 8px;
	font: 600 calc(.875 * var(--rem))/1.4 var(--f-titre);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.sommaire ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sommaire a {
	display: flex;
	align-items: center;
	min-height: 48px;
	text-decoration: none;
}

.sommaire a:hover {
	text-decoration: underline;
}

/* Phones: the folded copy of the list (inc/table-of-contents.php), closed, so the answer starts on the first screen. */
.sommaire-repli {
	border-left: 3px solid var(--bleu);
	border-radius: 0 8px 8px 0;
	background: var(--gris);
}

.sommaire-repli summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	margin: 0;
	padding: 0 20px;
	cursor: pointer;
	list-style: none;
}

.sommaire-repli summary::-webkit-details-marker {
	display: none;
}

.sommaire-repli summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s var(--ease);
}

.sommaire-repli[open] summary::after {
	transform: rotate(180deg);
}

.sommaire-repli ol {
	margin: 0;
	padding: 0 20px 12px;
	list-style: none;
}

.sommaire-repli a {
	display: flex;
	align-items: center;
	min-height: 48px;
	text-decoration: none;
}

.page-corps > nav.sommaire {
	display: none;
}

@media (min-width: 768px) {
	.page-corps > nav.sommaire {
		display: block;
	}

	.sommaire-repli {
		display: none;
	}
}

@media (min-width: 1100px) {
	.page-corps.a-sommaire {
		grid-template-columns: var(--marge) minmax(0, var(--mesure));
		gap: var(--ecart);
	}

	.sommaire {
		position: sticky;
		top: calc(var(--hh) + 24px);
	}

	.sommaire a {
		min-height: 40px;
	}
}

/* FAQ accordions */
.page-faq .wp-block-details {
	border-bottom: 1px solid var(--gris-bleu);
}

.page-faq .wp-block-post-content > .wp-block-details + .wp-block-details {
	margin-top: 0;
}

.page-faq .wp-block-post-content > :not(.wp-block-details) + .wp-block-details {
	border-top: 1px solid var(--gris-bleu);
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 12px 0;
	font: 600 var(--wp--preset--font-size--t-1)/1.3 var(--f-titre);
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	margin-right: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg);
}

.wp-block-details > :not(summary) {
	margin: 0 0 16px;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-details summary::after {
		transition: transform .25s var(--ease);
	}
}

/* Contact details list of /contact/ (content): label above, value or links below, 48 px targets. */
.coordonnees-contact {
	display: grid;
	gap: 16px;
	padding: 0;
	list-style: none;
}

.coordonnees-contact li {
	margin: 0;
}

.coordonnees-contact strong {
	display: block;
	font: 600 calc(.875 * var(--rem))/1.4 var(--f-titre);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.coordonnees-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-weight: 600;
}

/* Contact form (Forminator, unstyled by design) */
.forminator-custom-form .forminator-row {
	margin-top: 20px;
}

.forminator-custom-form .forminator-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.forminator-custom-form .forminator-required {
	color: var(--ardoise);
}

.forminator-custom-form :where(input[type="text"], input[type="email"], select, textarea) {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--ardoise);
	border-radius: 4px;
	background: var(--blanc);
	color: var(--ardoise);
	font: inherit;
}

.forminator-custom-form textarea {
	min-height: 140px;
}

.forminator-custom-form .forminator-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 400;
}

.forminator-custom-form .forminator-checkbox input {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--ardoise);
}

.forminator-custom-form .forminator-button-submit {
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--ardoise);
	border-radius: 4px;
	background: var(--ardoise);
	color: var(--blanc);
	font: 600 calc(1 * var(--rem))/1.2 var(--f-titre);
	cursor: pointer;
}

.forminator-custom-form .forminator-error-message {
	margin-top: 6px;
	color: #B42318;
	font-size: calc(.875 * var(--rem));
}