/*
 * Xin Art Galerie — socle : variables, éléments de base, conteneur, boutons, utilitaires d'accessibilité.
 * Chargée partout et dans l'éditeur. Couleurs, polices, tailles : theme.json.
 *
 * Reprend fidèlement la charte de l'ancien site (Bootstrap 3 + pluscom.css) : Questrial 14 px, gris #878584,
 * rose #de1274, titres noirs, conteneur 750 / 970 / 1170 px, points de rupture 768 / 992 / 1200 px.
 */

/* Police aussi déclarée ici (et pas seulement dans theme.json) pour les éditeurs de texte de l'administration. */
@font-face {
	font-family: Questrial;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/questrial-latin.woff2") format("woff2");
}

:root {
	--xin-gutter: var(--wp--custom--gutter, 15px);
	--xin-radius-s: var(--wp--custom--radius--small, 4px);
	--xin-transition: var(--wp--custom--transition, 0.3s);
	--xin-focus: var(--wp--preset--color--principale);
	--xin-rose: var(--wp--preset--color--principale);
	--xin-gris: var(--wp--preset--color--texte);
	--xin-noir: var(--wp--preset--color--secondaire);
	--xin-bordure: var(--wp--preset--color--bordure);
}

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	overflow-wrap: break-word;
}

/*
 * Éditeurs de texte de l'administration (TinyMCE : champs ACF « Éditeur visuel », éditeur classique) : cette feuille y
 * est injectée (add_editor_style), la règle ci-dessus supprimait leur marge intérieure. Les variables de theme.json
 * n'existent pas dans ce cadre : valeurs de la charte en direct.
 */
body.mce-content-body {
	margin: 0;
	padding: 10px 12px;
	background: #ffffff;
	color: #878584;
	font-family: Questrial, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

img {
	border: 0;
}

a {
	text-decoration: none;
	transition: all var(--xin-transition);
}

a:hover,
a:focus {
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--xin-focus);
	outline-offset: 2px;
}

p {
	margin: 0 0 10px;
}

:where(h1, h2, h3) {
	margin-top: 20px;
	margin-bottom: 10px;
}

:where(h4, h5, h6) {
	margin-top: 10px;
	margin-bottom: 10px;
}

h1,
h2 {
	position: relative;
}

h2 {
	padding-bottom: 10px;
}

:where(ul, ol) {
	margin-top: 0;
	margin-bottom: 10px;
	padding-left: 15px;
}

hr {
	margin: 5px 0;
	border: 0;
	border-top: 1px solid var(--xin-bordure);
}

blockquote {
	margin: 0 0 20px;
	padding: 10px 20px;
	border-left: 5px solid #eeeeee;
	font-size: 17.5px;
}

blockquote p:last-child {
	margin-bottom: 0;
}

blockquote footer,
blockquote cite {
	display: block;
	color: #777777;
	font-size: 80%;
	font-style: normal;
	line-height: 1.42857143;
}

blockquote footer::before,
blockquote cite::before {
	content: "\2014 \00A0";
}

/* Couleurs de l'ancienne charte, utilisables dans l'éditeur (Avancé › Classes CSS) */
.xin-rose,
.pink {
	color: var(--xin-rose) !important;
}

.xin-noir {
	color: var(--xin-noir) !important;
}

/* Conteneur (Bootstrap 3). flow-root : les marges des titres ne fusionnent pas avec l'extérieur (clearfix). */
.xin-container {
	display: flow-root;
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--xin-gutter);
}

.xin-main {
	display: flow-root;
}

@media (min-width: 768px) {
	.xin-container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.xin-container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.xin-container {
		width: 1170px;
	}
}

/* Pictos du thème (assets/icons, insérés en SVG) */
.xin-icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

/* Bouton fin, comme le bouton « Newsletter » de l'ancien pied de page */
.xin-btn {
	display: inline-block;
	padding: 3px 15px;
	border: 1px solid var(--xin-gris);
	background: transparent;
	color: var(--xin-gris);
	font-size: 0.8em;
	text-transform: uppercase;
	cursor: pointer;
}

.xin-btn:hover {
	border-color: #ffffff;
	background: var(--xin-rose);
	color: #ffffff;
}

/* Accessibilité */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	clip-path: none;
	background: #ffffff;
	color: var(--xin-noir);
	box-shadow: 0 2px 12px rgb(0 0 0 / 0.2);
}

/* Visibilité par écran (classes à poser dans l'éditeur : Avancé › Classes CSS) */
@media (max-width: 767.98px) {
	.xin-ordinateur-seulement {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.xin-mobile-seulement {
		display: none !important;
	}
}

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