/* Société d'histoire de Huningue - feuille de style du gabarit (index.php, page.php) */

/* Source Serif 4 (licence SIL OFL), hébergée sur le site */
@font-face {
	font-family: "Source Serif 4";
	src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("fonts/source-serif-4-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("fonts/source-serif-4-latin-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

body {
	margin: 0;
	padding: 16px;
	background: #d1f5ff;
	color: #222;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.5;
}

.page {
	max-width: 750px;
	margin: 0 auto;
}

a {
	color: #0b6a9e;
	font-weight: bold;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #07476b;
	text-decoration: underline;
}

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

/* En-tête et bandeaux de titre */
.entete {
	height: 150px;
	margin-bottom: 22px;
	background: url("images/entete2.jpg") center / cover no-repeat;
}

.bandeau {
	display: block;
	min-height: 22px;
	margin: 0;
	padding: 0 6px;
	background: url("images/title1.gif") repeat-x;
	background-color: #3a9fd0;
	font-size: 13px;
	font-weight: bold;
	line-height: 22px;
	text-align: center;
	color: #fff;
}

.salutation {
	margin-bottom: 22px;
}

footer.bandeau {
	font-size: 11px;
	font-weight: normal;
}

/* Deux colonnes : menu à gauche, contenu à droite */
.colonnes {
	display: grid;
	grid-template-columns: 165px minmax(0, 1fr);
	gap: 15px;
	align-items: start;
	margin-bottom: 16px;
}

/* Cadres bordés de bleu clair */
.bloc {
	border: 1px solid #95e1f8;
	background: #fff;
}

.bloc > .bandeau {
	margin: -1px -1px 0;
}

/* Menu */
.navigation > summary {
	display: none;
}

.navigation nav {
	display: grid;
	gap: 16px;
}

.navigation ul {
	margin: 0;
	padding: 5px;
	list-style: none;
}

.navigation li {
	padding-left: 16px;
	background: url("images/puce1.gif") 0 0.45em no-repeat;
}

.navigation .liens-principaux li {
	padding-left: 0;
	background: none;
}

.liens-principaux img {
	vertical-align: middle;
}

/* Contenu des pages */
.contenu {
	padding: 5px 10px;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 17px;
	line-height: 1.6;
	text-align: left;
	overflow-wrap: anywhere;
}

.contenu a {
	font-weight: normal;
	text-decoration: underline;
}

.contenu table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.contenu table td {
	font-family: inherit;
	font-size: 15px;
}

.contenu textarea,
.contenu input,
.contenu select {
	max-width: 100%;
	box-sizing: border-box;
}

img.vignette {
	margin: 4px;
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	vertical-align: middle;
}

hr.barre {
	border: 0;
	height: 2px;
	margin: 12px 0;
	background: #95e1f8;
}

.centre {
	text-align: center;
}

.souligne {
	text-decoration: underline;
}

/* Tablette et mobile : une colonne, menu repliable */
@media (max-width: 799px) {
	.entete {
		height: 90px;
		margin-bottom: 12px;
	}

	.salutation {
		margin-bottom: 12px;
		line-height: 1.4;
		padding: 4px 6px;
	}

	footer.bandeau {
		padding: 4px 6px;
		line-height: 1.4;
	}

	.colonnes {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.navigation > summary {
		display: block;
		cursor: pointer;
		list-style: none;
	}

	.navigation > summary::-webkit-details-marker {
		display: none;
	}

	.navigation > summary::before {
		content: "\25B8\00A0";
	}

	.navigation[open] > summary::before {
		content: "\25BE\00A0";
	}

	.navigation nav {
		gap: 12px;
		margin-top: 12px;
	}

	.navigation li {
		padding-top: 5px;
		padding-bottom: 5px;
		background-position: 0 1em;
	}

	.contenu {
		font-size: 16px;
	}
}

@media (min-width: 500px) and (max-width: 799px) {
	.navigation nav {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 499px) {
	body {
		padding: 8px 16px;
	}
}