/*
 * Jetons de style.
 *
 * Seule source de verite pour les couleurs, les espacements et les
 * polices. Les valeurs viennent de la maquette annotee.
 */

:root {
	/* Fonds. La page est blanche. Le crème ne sert qu'a deux bandeaux,
	   l'un en tete, l'autre en pied, qui ferment la zone en haut et en
	   bas. Entre les deux, tout est blanc, y compris les joints de la
	   mosaique. */
	--mz-fond: #ffffff;
	--mz-bandeau: #f4f1ed;
	--mz-fond-clair: #ffffff;
	--mz-joint: #ffffff;

	/* Encres. */
	--mz-encre: #1a1a18;
	--mz-encre-douce: #6f6e6f;
	--mz-filet: #e6e2db;

	/* Rouge de la signature. */
	--mz-accent: #bd2e43;
	--mz-accent-sombre: #8e1f33;

	/* Reserve affichee sous une image en cours de chargement, et
	   carres de remplissage qui terminent la derniere ligne. */
	--mz-reserve: #e6e2db;

	/* Boutons du menu. */
	--mz-bouton-fond: #fbf9f7;
	--mz-bouton-encre: #8d8c8d;
	--mz-bouton-fond-actif: #ffffff;
	--mz-bouton-encre-actif: #bd2e43;

	/* Visionneuse : zone de l'oeuvre en blanc, barre basse en crème. */
	--mz-visionneuse-fond: #ffffff;
	--mz-visionneuse-barre: #f4f1ed;

	/* Hauteur occupee par tout ce qui n'est pas l'oeuvre : la barre
	   basse, le cartouche et les marges. Elle est retiree de la hauteur
	   de la fenetre pour donner a l'image la place qui reste. */
	--mz-visionneuse-reserve: 230px;

	/* Mosaique. Le meme ecart partout : entre les vignettes, autour
	   d'elles, et entre la zone blanche et les deux zones crème. */
	--mz-joint-epaisseur: 10px;
	--mz-marge-laterale: 20px;
	--mz-colonnes: 3;

	/* Rythme vertical. */
	--mz-pas: 8px;
	--mz-espace-s: calc(var(--mz-pas) * 2);
	--mz-espace-m: calc(var(--mz-pas) * 4);
	--mz-espace-l: calc(var(--mz-pas) * 8);
	--mz-espace-xl: calc(var(--mz-pas) * 14);

	/* Largeur du contenu lisible, et largeur au-dela de laquelle la
	   mise en page cesse de grandir : le fond prend alors le relais. */
	--mz-largeur-max: 1200px;
	--mz-largeur-site: 1300px;

	/* Proportion du cadre d'ouverture. Toutes les oeuvres de l'accueil
	   y sont recadrees a l'identique, pour que le diaporama ne fasse pas
	   sauter la page d'une image a l'autre. Une seule valeur a changer :
	   3 / 2 paysage, 4 / 3 plus trapu, 1 / 1 carre. */
	--mz-ouverture-ratio: 1 / 1;

	/* Proportion des cases de la mosaique : vignettes et carres de
	   serie. Legerement plus haut que large. Changer aussi les tailles
	   enregistrees dans inc/setup.php si l'ecart devient important. */
	--mz-vignette-ratio: 450 / 470;

	/* Polices. Les principales viennent d'Adobe, les substitutions sont
	   hebergees ici et ne se chargent que si Adobe ne repond pas. */
	--mz-titres: "lieberuth", "Bitter Secours", Georgia, serif;
	--mz-courant: "gotham", "Inter Secours", system-ui, sans-serif;

	/* Durees. Le mouvement viendra plus tard, mais les valeurs sont
	   fixees ici des maintenant pour qu'il n'y en ait jamais deux
	   concurrentes dans le projet. */
	--mz-duree-courte: 180ms;
	--mz-duree-moyenne: 320ms;
	--mz-duree-longue: 640ms;
	--mz-courbe: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 48em) {
	:root {
		--mz-marge-laterale: 48px;
		--mz-colonnes: 4;
	}
}

/*
 * Polices de substitution.
 *
 * Elles ne sont jamais prechargees : le navigateur ne les telecharge
 * que le jour ou la police principale manque a l'appel. C'est tout
 * l'interet d'une substitution, et c'est pourquoi le poids des fichiers
 * compte moins ici qu'ailleurs.
 *
 * Les proprietes d'ajustement calent la substitution sur les
 * proportions de la police principale, pour que la bascule ne decale
 * pas la grille. Les valeurs sont a mesurer en comparant un meme
 * paragraphe avec et sans Adobe.
 */

@font-face {
	font-family: "Bitter Secours";
	src: local("Bitter"), url("../fonts/Bitter-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	size-adjust: 100%; /* A MESURER */
}

@font-face {
	font-family: "Inter Secours";
	src: local("Inter Light"), url("../fonts/Inter-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	size-adjust: 100%; /* A MESURER */
}

@font-face {
	font-family: "Inter Secours";
	src: local("Inter Bold"), url("../fonts/Inter-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	size-adjust: 100%; /* A MESURER */
}