/*
 * RLL Socle, la feuille de base. Ce qui peut s'écrire dans theme.json y est écrit ; ici ne
 * restent que les règles que theme.json ne sait pas dire. Toutes les couleurs passent par
 * les rôles (`--wp--custom--couleur--*`), jamais par une valeur.
 */

/* Aucune page ne défile de côté. `clip` et non `hidden` : `hidden` créerait un contexte de
   défilement et casserait l'en-tête collant (leçon de repousseleslimites.com, 2026). */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

/* Une ancre ne finit pas sous l'en-tête collant. */
html {
	scroll-padding-top: calc(var(--wp--custom--entete--hauteur) + var(--wp--preset--spacing--30));
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Les surfaces que personne ne dessine portent quand même l'identité. */
::selection {
	background: var(--wp--custom--couleur--action);
	color: var(--wp--custom--couleur--sur-action);
}

:where(a) {
	text-decoration-color: var(--wp--custom--couleur--lien-trait);
	text-decoration-thickness: var(--wp--custom--trait--fin);
	text-underline-offset: var(--wp--custom--trait--decalage);
}

:where(a:hover) {
	text-decoration-thickness: var(--wp--custom--trait--fort);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--trait--fort) solid var(--wp--custom--couleur--focus);
	outline-offset: var(--wp--custom--focus--decalage);
}

:where(.wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--custom--couleur--texte);
}

/* Une cible de 48 px pour toute action. */
:where(.wp-element-button, .wp-block-button__link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--cible);
	text-align: center;
	text-underline-offset: var(--wp--custom--trait--decalage);
}

/* Les titres se coupent en lignes équilibrées, les paragraphes évitent la veuve. */
:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li, figcaption) {
	text-wrap: pretty;
}

:where(img, video) {
	max-width: 100%;
	height: auto;
}

:where(table) {
	border-collapse: collapse;
}

/* Les tableaux du contenu, bloc Tableau ou HTML venu d'ailleurs : un filet par cellule. */
:where(.wp-block-table, .wp-block-post-content) :where(th, td) {
	border: var(--wp--custom--trait--fin) solid var(--wp--custom--couleur--filet);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: left;
	vertical-align: top;
}

:where(.wp-block-table, .wp-block-post-content) thead {
	border-bottom: var(--wp--custom--trait--fort) solid var(--wp--custom--couleur--appui);
}

:where(.wp-block-table, .wp-block-post-content) th {
	font-weight: 600;
}

/* La liste « Filets » (style de bloc) : des lignes séparées d'un filet, sans puce. */
.wp-block-list.is-style-filets {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-filets > li {
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: var(--wp--custom--trait--fin) solid var(--wp--custom--couleur--filet);
}

/* Les questions fréquentes : la question est une cible entière, un signe dit l'état. En
   `display: flex`, le résumé perd le marqueur natif ; le « + » et le « − » le remplacent, à
   droite, et ne sont pas lus (texte de remplacement vide). */
:where(.wp-block-details) summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	min-height: var(--wp--custom--cible);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

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

:where(.wp-block-details) summary::after {
	content: "+";
	content: "+" / "";
	margin-inline-start: auto;
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1;
}

:where(.wp-block-details[open]) > summary::after {
	content: "\2212";
	content: "\2212" / "";
}

:where(.wp-block-details) > :not(summary) {
	margin-top: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ */
/* L'en-tête collant                                                   */
/* ------------------------------------------------------------------ */

/* La partie d'en-tête porte la classe `socle-entete` dans les gabarits. Elle colle en haut,
   sous la barre d'administration quand elle est là. */
.socle-entete {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--custom--couleur--surface);
}

/* ------------------------------------------------------------------ */
/* D'une page à l'autre                                                */
/* ------------------------------------------------------------------ */

/* Changer de page sans écran blanc : le navigateur fond l'ancienne page dans la nouvelle, et
   l'en-tête, qui porte le même nom des deux côtés, reste en place. Transitions de vue entre
   documents (Chrome, Edge, Safari) ; un navigateur qui ne les connaît pas change de page comme
   avant. Rien ne joue au chargement d'une page : aucun coût sur la vitesse mesurée. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	.socle-entete {
		view-transition-name: socle-entete;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: var(--wp--custom--transition--page);
	}
}

/* ------------------------------------------------------------------ */
/* Le pied de page                                                     */
/* ------------------------------------------------------------------ */

.socle-pied {
	margin-block-start: 0;
}

/* La marque du pied de page n'est pas un titre : un seul h1 par page. */
.socle-pied .socle-marque {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--intitule);
	line-height: 1.3;
}

/* Une étiquette au-dessus d'une liste du pied : petite, en capitales, espacée. */
.socle-etiquette {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--etiquette);
	font-weight: 600;
	letter-spacing: var(--wp--custom--etiquette--espacement);
	line-height: 1.4;
	text-transform: uppercase;
}

/* Une liste de liens sans puces, une cible par ligne. */
.socle-liens {
	list-style: none;
	margin: 0;
	padding: 0;
}

.socle-liens li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.socle-liens a {
	text-decoration: none;
}

.socle-liens a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Le gabarit d'article                                                */
/* ------------------------------------------------------------------ */

/* Le bandeau : l'image mise en avant sous un voile de la couleur d'appui. */
.socle-bandeau .wp-block-cover__background {
	background-color: var(--wp--custom--couleur--appui) !important; /* le bloc écrit la sienne en ligne */
}

/* L'article et sa colonne de côté : la ligne de lecture, puis le sommaire à droite au bureau.
   Sur téléphone, le sommaire passe avant le texte, dans l'ordre du document. */
.socle-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.socle-article > .socle-article__cote {
	order: -1;
}

/* Sous le bureau aussi, le texte garde la ligne de lecture : à la tablette, 728 px de large
   donnaient des lignes de 110 caractères. */
.socle-article > * {
	max-width: var(--wp--style--global--content-size);
}

@media (min-width: 1025px) {
	.socle-article {
		grid-template-columns: minmax(0, var(--wp--style--global--content-size)) minmax(0, 18.75rem);
		justify-content: space-between;
		align-items: start;
		column-gap: var(--wp--preset--spacing--50);
	}

	.socle-article > .socle-article__cote {
		order: 0;
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: calc(var(--wp--custom--entete--hauteur) + var(--wp--preset--spacing--40) + var(--wp-admin--admin-bar--height, 0px));
	}

	.socle-article > .socle-article__texte {
		grid-column: 1;
		grid-row: 1;
	}
}

.socle-seulement-bureau {
	display: none;
}

@media (min-width: 1025px) {
	.socle-seulement-bureau {
		display: block;
	}
}

/* Une légende liée à un champ vide ne laisse pas de ligne vide. */
:where(.socle-bandeau) p:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; /* ds-allow-hardcode : la valeur d'usage de prefers-reduced-motion */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important; /* ds-allow-hardcode : idem */
	}
}

/* ------------------------------------------------------------------ */
/* Les gabarits                                                        */
/* ------------------------------------------------------------------ */

/* L'en-tête, le contenu et le pied se touchent : le rythme se règle dans chacun. */
.wp-site-blocks > .socle-principal,
.wp-site-blocks > .socle-pied {
	margin-block-start: 0;
}

.socle-principal {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.socle-principal--plein {
	padding-block: 0;
}

.socle-principal--article {
	padding-block: 0 var(--wp--preset--spacing--60);
}

/* Le bandeau d'article : le titre en blanc sur l'image voilée, sur la colonne du site. */
.socle-bandeau.wp-block-cover {
	min-height: var(--wp--custom--bandeau--hauteur);
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gouttiere);
	align-items: flex-end;
}

/* Le titre et sa légende s'alignent sur la colonne du site, pas sur le milieu de l'image. */
.socle-bandeau .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.socle-bandeau .socle-bandeau__titre {
	max-width: 24ch;
	margin: 0;
}

.socle-bandeau :where(h1, p) {
	color: var(--wp--custom--couleur--sur-appui);
}

.socle-bandeau .socle-bandeau__legende {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--custom--couleur--sur-appui-doux);
	font-size: var(--wp--preset--font-size--etiquette);
	font-style: italic;
}

.socle-article {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--gouttiere));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--custom--gouttiere) 0;
}

/* Plus d'air au-dessus d'un titre qu'au-dessous : un titre ouvre ce qui suit. */
:where(.socle-principal) > .wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}

:where(.socle-principal) > .wp-block-post-content > :where(h3, h4) {
	margin-block-start: var(--wp--preset--spacing--40);
}

.socle-article__texte > .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.socle-article__texte > .wp-block-post-content > :where(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------ */
/* Les compositions                                                    */
/* ------------------------------------------------------------------ */

.socle-chapo {
	color: var(--wp--custom--couleur--texte-doux);
}

.socle-voix {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--intitule);
	line-height: 1.3;
}

.socle-heros,
.socle-bande {
	padding-block: var(--wp--preset--spacing--60);
}

.socle-appel {
	padding: var(--wp--preset--spacing--40);
}

.socle-carte {
	padding: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.socle-carte--large {
		grid-column: span 2;
	}
}

/* Les icônes de l'index : un trait de 1,5 sur une grille de 24, à la couleur d'appui. */
.socle-index__repere::before {
	content: "";
	display: block;
	width: var(--wp--custom--icone);
	height: var(--wp--custom--icone);
	margin-bottom: var(--wp--preset--spacing--30);
	background-color: var(--wp--custom--couleur--appui);
	-webkit-mask: var(--socle-icone) center / contain no-repeat;
	mask: var(--socle-icone) center / contain no-repeat;
}

.socle-icone--document { --socle-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.socle-icone--outil { --socle-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a4 4 0 0 0 5 5L12 19a2.1 2.1 0 0 1-3-3z'/%3E%3Cpath d='M14.5 6.5 17 4l3 3-2.5 2.5'/%3E%3C/svg%3E"); }
.socle-icone--horloge { --socle-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.socle-icone--cible { --socle-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.socle-icone--bulle { --socle-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.socle-icone--fleche { --socle-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }