/* Base de la page (thème « ombelle ») : polices de la charte, fond, lien
   d'évitement. Tout le reste est dans l'extension (composants communs). Les
   jetons (--og-*) viennent de grilles.css, posés sur <body class="og-charte">. */

@font-face {
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("polices/quicksand.woff2") format("woff2");
}

@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("polices/eb-garamond.woff2") format("woff2");
}

@font-face {
	font-family: "EB Garamond";
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url("polices/eb-garamond-italique.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("polices/poppins-400.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("polices/poppins-500.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("polices/poppins-600.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("polices/poppins-700.woff2") format("woff2");
}

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

body {
	margin: 0;
	/* clip et non hidden : hidden ferait du <body> une zone de défilement
	   (<html> a déjà overflow-x: clip, accueil.css) et les éléments
	   collants (photos de la fiche, barre d'achat) ne suivraient plus. */
	overflow-x: clip;
	background: var(--og-blanc);
	color: var(--og-texte);
	font: 400 var(--og-taille-l)/1.55 var(--og-police-texte);
}

img {
	max-width: 100%;
	height: auto;
}

.ombelle-evitement {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 8px 14px;
	background: var(--og-brun);
	color: var(--og-blanc);
	font: 600 var(--og-taille-m)/1.4 var(--og-police);
}

.ombelle-evitement:focus {
	top: 16px;
}