/*
 * Base : remise à zéro légère, typographie, contenu éditorial (.dqb-contenu).
 * Aucune valeur en dur : tout vient des tokens du contrat (tokens.css).
 * Les puces des listes et le soulignement des liens restent ceux du navigateur :
 * un composant qui n'en veut pas les retire lui-même.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

body {
	margin: 0;
	background: var(--couleur-fond);
	color: var(--couleur-texte);
	font-family: var(--police-texte);
	font-size: var(--taille-texte);
	font-weight: var(--graisse-texte);
	line-height: var(--interligne-texte);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--police-titre);
	font-weight: var(--graisse-titre);
	line-height: var(--interligne-serre);
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--taille-h1);
}

h2 {
	font-size: var(--taille-h2);
}

h3 {
	font-size: var(--taille-h3);
}

h4 {
	font-size: var(--taille-h4);
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Icônes en ligne (dqb_icone()) : dans le fil du texte, à la couleur du texte. */
.dqb-icone {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: -0.125em;
}

/*
 * Imagify sert WebP et AVIF en enveloppant l'<img> dans un <picture>, et déplace sa classe
 * sur le <picture>. display: contents retire le <picture> du rendu : l'image reste l'enfant
 * direct de son conteneur. On dimensionne donc une image par son conteneur, jamais par sa classe.
 */
picture {
	display: contents;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* :where() : spécificité nulle, survol compris, pour qu'une seule classe (un lien habillé en bouton)
   passe toujours devant. Avec « a:hover » (0,1,1), le survol de base écrasait la couleur du bouton.
   Un lien qui pose sa couleur pose donc aussi son survol. */
:where(a) {
	color: var(--couleur-lien);
}

:where(a:hover) {
	color: var(--couleur-lien-survol);
}

/* Contenu éditorial : the_content() et WYSIWYG ACF. */
.dqb-contenu {
	& > * + * {
		margin-block-start: var(--espace-4);
	}

	& > :is(h2, h3, h4) {
		margin-block-start: var(--espace-7);
	}

	& a {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	& :is(ul, ol) {
		padding-inline-start: var(--espace-5);
	}

	& blockquote {
		padding-inline-start: var(--espace-4);
		border-inline-start: 3px solid var(--couleur-accent);
		color: var(--couleur-texte-doux);
	}
}