/********************************************
 * CSS for the deptinfo-ens skin
 * 
 *      duplouy@lsv.fr
 * with thanks to
 *     dwb@lsv.fr
 * and frederic.boulanger@centralesupelec.fr
 *     2021
 *******************************************/

:root {
    --color-black: rgba(20, 20, 20, 1);
    --color-white: rgba(255, 255, 255, 1);
    --color-alpha: rgb(245,105, 96);
    --color-alpha-lighter: rgb(251,201,198, 1);
    --color-alpha-darker: rgb(191,22, 13);
    --color-beta: rgb(224, 211, 222);
    --color-gamma: rgb(203, 184, 169);	
    --color-gamma-darker: rgba(166, 146,  106, 1);
    --color-prune: rgba(100, 0, 60, 1);
    --color-light: rgba(250, 250, 250, 1);
    --color-black-lighter: rgba(96, 96, 96, 1); /* Zambezi */
    --color-backup: rgba(200, 100, 60, 1);
    --color-gray: rgba(243, 243,  243, 1);
    --color-gray-darker: rgba(235, 235,  235, 1);
    --color-accent: rgb(1,241,233,1);
    --color-accent-dark: rgba(1, 210, 203, 1);
    --color-bg: rgb(255, 255, 255, 1);
    --color-gray-mid: rgba( 201, 201, 201, 1);
    --color-red-lighter: rgba(255, 146, 146, 1);
    --width-gutter: 1em;
    
}

.menu-link, .menu-link:visited {
    border-radius: 1px !important;
}

.affiliations {
    float: right;
    display: block;
    width: initial;
    margin-right: 60px;
}

@media (max-width: 680px) {
    .affiliations {
	display: none !important;
    }
}
    
@media all and (min-width: 901px) {
    /* Desktop only */
    
    #sitenav > nav {
	/* TODO IE8 fallback (dwb) */ 
	min-width: initial;
	max-width: initial;
	align: center;
    }
    .menu-bar {
	background: inherit;
	white-space: wrap;
    }

    nav ul,
    nav li {
    list-style: none;
    padding: 0px;
    margin: 0;
}

}

/* Pour l'affichage en "grille" de la page d'accueil, l'idée est d'avoir les
 * informations sur une colonne (plus large) de gauche, et des actualités
 * rapides sur la colonne de droite */
.dpt-page-accueil {
	display:grid;
	grid-template-columns: repeat(3, minmax(220px, 1fr));
	flex-shrink:1;
	max-width: 1280px;
	justify-items: stretch;
	align-item: stretch;
}

@media (max-width:659px) {
	/* Si la grille ne peut pas rentrer en largeur sur l'appareil, on
	 * affiche chacune des parties sous la forme d'une colonne */ 
	.dpt-page-accueil {
		display:flex;
		flex-direction:column;
	}
}

.dpt-page-accueil > div:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
}

.dpt-page-accueil > div > .blogit-post-summary {
	margin-bottom:20px; /* On force un peu d'espacement entre les actualités */
}

@media (min-width:660px) {
	.dpt-page-accueil > div > .blogit-post-summary {
		margin-left:10px;
	}
	.dpt-page-accueil > div > div {
		margin-left:10px;
	}
}

/* Plus spécifiquement, pour les actualités de la page d'accueil, on est pas
 * intéressé par les lignes d'informations générales, mais juste le contenu. */
.dpt-page-accueil > div > .blogit-post-summary > .blogit-meta-data-head {
	display:none;
}

.dpt-page-accueil > div > .blogit-post-summary > h2 {
	display:none;
}

.dpt-page-accueil .blogit-post-summary .wikilink {
	text-decoration:underline !important;
	/* Je vais en contradiction avec la règle générale que le wiki LMF
	 * utilise pour que le lien soit très clair sur la page d'accueil */
}

/* Affichage en grille pour les cours d'un niveau */
.presentation-cours {
	display:grid;
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	flex-shrink: 1;
	justify-items: stretch;
	align-item: stretch;
	max-width:calc(50em + 20px);
	/* les 50em sont pour être cohérents avec la règle sur la plupart des
	 * blocs de contenu <p> (et autres), les 20px pour prendre en compte
	 * les marges ajoutées pour améliorer la présentation des blocs
	 * <article> contenus dans ce div. */
}

@media (max-width:659px) {
	.presentation-cours {
		display:flex;
		flex-direction:column;
	}
}
@media (min-width:660px) {
	.presentation-cours > article {
		margin:5px;
	}
}

.presentation-cours > article > h1 {
	margin:0px;
	font-size:150%;
}

article.avertissement {
	background-color: var(--color-red-lighter);
	box-shadow:
		0 5px 10px rgba(0, 0, 0, 0.1),
		0 20px 20px rgba(0, 0, 0, 0.05);
}
/* Annulation de la largeur maximale si on ne contraint pas la largeur autrement dans la page.
article.avertissement > p {
	max-width:none;
}
*/

/* Extension de la règle des 50em à des parties de contenu qui n'étaient
 * pas encore prises en compte : */
#title {
	font-size:150%;
	max-width:50rem;
}

/* Modification du style pour distinguer les liens de langue */
.menu-link-lang {
	padding:7px 3px;
	margin:0px;
	background: var(--color-accent-dark);
	position:relative;
}

/* Modification du style pour ajouter des informations contextuelles qui ne
 * sont pas des liens directements dans le menu latéral */
#sidebar li.sidebar-info { /* Il faut la précision pour prendre le dessus
                            * sur les autres paramètres établis */
	text-align:right;
	border-bottom:none;
	margin-left:5px;
}
#sidebar li.sidebar-info:hover {
	background:inherit;
	color:inherit;
}
#sidebar li.sidebar-info > a {
	text-decoration:underline;
}
#sidebar li.sidebar-info > a:hover {
	background:inherit;
	color:inherit;
}

/* On repasse sur toutes les tailles/présentations des éléments de sections
 * et de titre pour plus de cohérence avec la présence:
 *  - le titre de la page doit être le plus gros mais pas trop gros
 *  - le h1 doit être moins gros, mais le plus important
 *  - le h2 doit l'être (et rester plus gros que le texte
 */
#title {
	font-size:1.6em;
}

h1 {
	font-size:1.4em;
	width:100%;
	max-width:50rem;
}
h2 {
	font-size:1.3em;
	max-width:50rem;
}
h3 {
	font-size:1.2em;
	max-width:50rem;
}
h4 {
	font-size:1.15em;
	max-width:50rem;
}
h5 {
	font-size:1.1em;
	max-width:50rem;
}
h6 {
	font-size:1.05em;
	max-width:50rem;
}

/* Modifications esthétiques sur les calendriers */
[id^="DptinfoCalendar"] a {
	text-decoration:none !important;
	/* C'est en contradiction avec le thème général, et donc il faut le
	 * !important pour être sur d'enlever le souligné dans ces calendriers.
	 */
}
div[id^="DptinfoCalendar"] {
	/*	max-width:50rem;	*/
}

/* Modifications pour faire apparaître les fontes */
#pageoptions {
	top:100%;
	right:0ex;
	border: 1px ridge rgba( 2, 2, 2, 0.2);
	border-width: 2px 0px 2px 2px;
	background-color:var(--color-gray-darker);
}
#pageoptions .selectlang {
	padding:0px;
}
#pageoptions > P {
	padding:0px;
	margin-block:0;
}
#pageoptions > P > span {
	margin:0px;
}
#pageoptions .selectlang A {
	padding:5px;
	color:black;
}
.selectlang A:hover {
	background-color:var(--color-accent-dark);
}

/* Présentation spécifique pour les conférences de rentrée */
.conferences-rentree > article > h1 {
	margin:0px;
	font-size:140%;
}
.conferences-rentree > article > h2 {
	font-size:130%;
	margin-top:0px;
}