/*
 * Bases typographiques — issue 02.
 *
 * Fraunces pour les titres, Karla pour tout le reste. Deux familles, aucune
 * troisième. Fraunces ne descend jamais sous 22 px : h4 à h6 passent en Karla.
 * Les tailles fluides sont des clamp() : aucune classe responsive.
 */

/* Focus visible — issue 06. Un contour de 3 px décalé de 2 px, sur tout ce
   qui prend le focus au clavier. Jamais outline: none (just lint le refuse).
   Sa couleur suit le fond : bronze sur clair, ivoire sur le brun. */
:focus-visible {
	outline: var(--pel-focus-epaisseur) solid var(--pel-focus-couleur);
	outline-offset: var(--pel-focus-decalage);
}

/* Fluent Forms retire le contour de ses champs et de son bouton, par des
   règles plus précises que la nôtre (audit du 11/10, /contact) : il revient. */
form[id^="fluentform"] :focus-visible {
	outline: var(--pel-focus-epaisseur) solid var(--pel-focus-couleur);
	outline-offset: var(--pel-focus-decalage);
}

body {
	background: var(--pel-ivoire);
	color: var(--pel-encre);
	font-family: var(--pel-font-texte);
	font-size: var(--pel-fs-body);
	line-height: var(--pel-lh-texte);
}

h1,
h2,
h3 {
	font-family: var(--pel-font-titre);
	font-weight: 600;
	line-height: var(--pel-lh-titre);
	color: var(--pel-encre);
}

h1 { font-size: var(--pel-fs-h1); }
h2 { font-size: var(--pel-fs-h2); }
h3 { font-size: var(--pel-fs-h3); }

h4,
h5,
h6 {
	font-family: var(--pel-font-texte);
}

small {
	font-size: var(--pel-fs-small);
}

/* Utilitaire : masqué à l'écran, lu par les lecteurs d'écran (brief § 2).
   Jamais display: none, qui le retirerait aussi des technologies d'assistance. */
.pel-u-visually-hidden {
	position: absolute;
	width: var(--pel-filet);
	height: var(--pel-filet);
	margin: calc(var(--pel-filet) * -1);
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* La barre collante de la fiche (mobile) recouvre le bas de page : la page lui
   réserve sa hauteur. Règle de socle, sur body, documentée comme exception
   (intégration Bricks, issue 221) : aucune classe de composant ne peut la porter. */
@media (max-width: 767px) {
	body:has(.pel-sticky-bar) {
		padding-bottom: var(--pel-barre-h);
	}
}