h1#title {
	text-align    : center;
}

@font-face {
	font-family : 'Computer Modern Serif';
	src         : url('https://la.porteduciel.fr/fonts/cmunrm.woff') format('woff');
	font-weight : normal;
	font-style  : normal;
}

@font-face {
	font-family : 'Computer Modern Serif';
	src         : url('https://la.porteduciel.fr/fonts/cmunbx.woff') format('woff');
	font-weight : bold;
	font-style  : normal;
}

@font-face {
	font-family : 'Computer Modern Serif';
	src         : url('https://la.porteduciel.fr/fonts/cmunti.woff') format('woff');
	font-weight : normal;
	font-style  : italic;
}

@font-face {
	font-family : 'Computer Modern Serif';
	src         : url('https://la.porteduciel.fr/fonts/cmunbi.woff') format('woff');
	font-weight : bold;
	font-style  : italic;
}

/*
 * Quotes
 */
blockquote {
	font-style   : italic;
}

/*
 * Code blocks.
 */
pre {
	margin-left  : 2em;
}

/*
 * Menu
 */
#menu {
	font-size   : 1.5em;
	text-shadow : 4px 4px 4px #aaa;
}

#menu {
	padding-inline-start : 0px;
}

#menu > .menu-entry {
	display           : block;
	position          : relative;
	text-align        : center;
}

#menu a {
	color           : darkblue;
	height          : 100%;
	text-decoration : none;
}

#menu  > .menu-entry {
	display         : flex;
	justify-content : center;
	align-items     : center;
}

#menu a:hover {
	background-color : #fbd7ad;
}

/*
 * Emphasize the fact that it's an external link
 * to a new tab.
 */
#menu a[target="_blank"]:hover {
	background-color : #ffbe71;
}

#menu a[target="_blank"] {
	background-image    : url(/ext-link.svg);
	background-position : center right;
	background-repeat   : no-repeat;
}

#menu	 {
	display           : grid;
	grid-auto-flow    : column;
	grid-auto-columns : 1fr;

	border-top        : 1px solid black;
	border-bottom     : 1px solid black;

	padding-top       : 3px;
	padding-bottom    : 3px;

	margin-bottom     : 3px;
}

@media only screen and (max-width: 800px) {
	#menu {
		grid-auto-flow : row;
	}
}

/*
 * Current article's tags, translations
 */
#tags, #trs, #date, #update {
	text-align: right;
}

/*
 * Meta data block
 */

#metas {
	border  : 1px black dotted;
	padding : 1em;
}

#metas #title {
	text-decoration : underline;
}

/*
 * Overall page
 */
body {
	width            : 75%;
	text-align       : justify;
	margin-left      : 12.5%;
	margin-right     : 12.5%;
	background-color : #ffeed4e0;
	font-family      : 'Computer Modern Serif';
}

@media only screen and (max-width: 700px) {
	body {
		width            : 90%;
		margin-left      : 5%;
		margin-right     : 5%;
	}
}

/*
 * Center all images by default
 */
img {
	display       : block;
	margin-left   : auto;
	margin-right  : auto;
	max-width     : 75%;
	max-height    : 90vh;
}

img.framed {
	border                : 2em solid white;
	outline               : 0.2em solid saddlebrown;
}

/*
 * Stylized image's captions.
 */

figure figcaption {
	color         : dimgrey;
	margin-left   : 20%;
	margin-right  : 20%;
	font-style    : italic;
}

@media only screen and (max-width: 700px) {
	figure {
		margin-left   : 5%;
		margin-right  : 5%;
	}

	figure figcaption {
		margin-left   : 5%;
		margin-right  : 5%;
	}
}

/*
 * Important message
 */
#important {
	font-style    : italic;
	text-align    : center;
	margin-top    : 1em;
	margin-bottom : 1em;
}

footer {
	text-align    : center;
	margin-top    : 2em;
	margin-bottom : 20%;
}

.sub-menu {
	font-size : 0.9em;
	display   : none;
	width     : 100%;
	z-index   : 1;
	position  : absolute;
	/*
	 * This is awful: we rely on this to move the div
	 * containing the submenu below. But we musn't go
	 * too far, for otherwise, if we move out of the
	 * .menu-entry, we'll lose the :hover and the submenu
	 * would disappear.
	 *
	 * The menu items font is 1.5em, so we take 1.4em to be
	 * "on it". We must add 1em because we add some extra
	 * padding in the .menu-entry-url to center elements
	 * horizontally. Hence, 1+1.4em.
	 *
	 * It's still a bit clumsy looking, but it seems to work
	 * (narrow screens unmanaged yet, TODO). Ideally, we'd
	 * want the submenus to be displayed horizontally on
	 * a second row, but still without any JS, somewhat like:
	 *	https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_subnav
	 */
	margin-top       : 2.4em;
	top              : 0;
	left             : 0;
	background-color : #fff0d9;
	box-shadow       : 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-align       : center;
}

/* When you move the mouse over the subnav container, open the subnav content */
.menu-entry:hover .sub-menu {
	display : block;
}

/* Precise query to override #menu a's height */
#menu a.menu-entry-url {
	width      : 100%;
	height     : fit-content;
	text-align : center;
	padding    : 1em;
	margin     : auto;
}

.sub-menu > a {
	display : block;
	width   : 100%;
}

.imgs-grid {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
}

.imgs-grid > * {
	justify-self : center;
	align-self   : center;
}

#logo {
	margin-bottom: 2em;
	width:   33%;
}

#carousel {
	height: 40%;
}

/* so that the images follow the #carousel's height */
#carousel .slides, #carousel .slides div, #carousel .slides div img {
	height: 100%;
}

#carousel .slides > :not(.active) {
	display: none;
}

#carousel {
	margin-top: 2em;
}

#carousel .prev, #carousel .next {
	position:   relative;
	top:        50%;
	outline:    0;
}

#carousel .prev {
	float: left;
}

#carousel .next {
	float: right;
}

.contact-icons {
	font-size: 1.5em;
	text-decoration: none;
}

#presentation-text {
	column-count: 3;
}

@media only screen and (max-width: 850px) {
	#presentation-text {
		column-count: 1;
	}
}