/**************************************************
*										*
*		Document CSS - Chats 2.0 - Screen		*
*										*
**************************************************/

/***************
*	 Polices	*
****************/
@import url('https://fonts.googleapis.com/css?family=Vollkorn|Vollkorn+SC');

/***************************
* Définition des variables *
***************************/

:root {
	--bg-principal:#eee;
	--bg-secondaire:#dedede;
	--bg-carte-chat:#7b3b3b;
	--bg-carte-vieuxchat:#666;
	--bg-carte-chat-hover:#5c2c2c;
	--bg-carte-vieuxchat-hover:#333;
	--texte-principal:#000;
	--texte-secondaire:#999;
	--texte-carte-chat:#fff;
	--texte-carte-vieuxchat:#fff;
	--texte-lien:#666;
	--texte-carte-lien:#dedede;
}

/* Pour thème sombre */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-principal:#000;
		--bg-secondaire:#222;
		--bg-carte-chat:#5c2c2c;
		--bg-carte-vieuxchat:#333;
		--bg-carte-chat-hover:#7b3b3b;
		--bg-carte-vieuxchat-hover:#666;
		--texte-principal:#ccc;
		--texte-secondaire:#999;
		--texte-carte-chat:#ccc;
		--texte-carte-vieuxchat:#ccc;
		--texte-lien:#666;
		--texte-carte-lien:#dedede;
	}
}

/***********************************
* Balises et définitions générales *
***********************************/
body {
	display:block;
	margin:0;
	padding:0;
	font-family:'Vollkorn', serif;
	font-size:1em;
	font-weight:normal;
	font-style:normal;
	font-variant:normal;
	text-align:left;
	background-color:var(--bg-principal);
	color:var(--texte-principal);
	width:100%;
}

/* Liens */

a, a:visited, a:active {
	background-color:transparent;
	color:var(--texte-lien);
	text-decoration:none;
}
.chat a, .chat a:visited, .chat a:active,
.vieuxchat a, .vieuxchat a:visited, .vieuxchat a:active {
	background-color:transparent;
	color:var(--texte-carte-lien);
	text-decoration:none;
}
.unchat a, .unchat a:visited, .unchat a:active {
	background-color:transparent;
	color:var(--texte-principal);
	text-decoration:none;
}
.unchat .photos a, .unchat .photos a:visited, .unchat .photos a:active {
	background-color:transparent;
	color:var(--texte-carte-lien);
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

a[hreflang]:after {
	background-color:transparent;
	color:var(--texte-secondaire);
	content:"\0000a0[" attr(hreflang) "]";
}

a img { border:none; }

/* Titres */

h2 {
	margin:0;
	font-size:1.4em;
	font-weight:bold;
}
h3 {
	margin:0;
	font-size:1em;
	font-weight:bold;
}

/* Mise en forme du texte */

acronym { border-bottom:1px dotted #000000; }
strong { font-weight:bold; }
em { font-style:italic; }
q { quotes: "« " " »" '"' '"' "'" "'"; font-style:italic; }
blockquote { }
del { color:#999; background-color:inherit; text-decoration:line-through; }
ins { color:#F00; background-color:inherit; font-weight:bold; }
code {
	margin:5px 0 10px 0;
	padding:2px 2px 2px 2px;
	font-family:monospace;
	font-size:1.2em;
	border:1px dotted #000;
	background-color:#FFF;
	color:var(--texte-principal);
}

figure {

}
figure img {
	width:320px;
	height:200px;
	border-radius:0.4em;
}
figcaption {
	text-align:center;
	font-size:1em;
	font-style:italic;
}

/* Spéciaux */

.infobulle { cursor:help; }
.centre { text-align:center; }

/* Listes */

.nolist li { list-style-type:none; }
ul li { list-style-type:square; }

/************
*  En-tête  *
************/

body > header {
	position:relative;
	display:block;
	margin:0;
	padding:0.4em;
	background-color:transparent;
	color:var(--texte-principal);
	text-align:center;
}

h1 {
	margin:0;
	background-color:transparent;
	color:var(--texte-principal);
	font-size:1.6em;
}

body > header > p {
	margin:0.2em 0 0 0;
}

/*****************
*  Pied-de-page  *
*****************/

footer {
	display:block;
	margin:0;
}

footer > p {
	padding:0.2em 1em;
	text-align:center;
}

/***************
*  Navigation  *
***************/

nav {
	display:none;
}

/*************
*  Sections  *
*************/

/* Page d'accueil : sections en grille */

main {
	display:flex;					/* sera le conteneur d'une boîte flexible */
	flex-flow:row wrap;				/* direction et renvoi */
	justify-content:space-around;		/* aligner sur l'axe de base (de flex-flow), ici : ligne */
	align-items:flex-start;			/* aligner sur l'axe secondaire (pas de flex-flow), ici : colonne */
	margin:0 auto;
	padding:1em 2em;
	background-color:var(--bg-secondaire);
	color:var(--texte-principal);
	font-size:1em;
}

section > header {
	border-bottom:1px solid #fff;
	text-align:center;
}

figure {
	margin:0.4em auto;
	text-align:center;
}

.chat, .unchat, .vieuxchat {
	flex:1 0 auto;
	align-self:stretch;
	display:block;
	margin:1em;
	padding:1em;
	width:27%;
	border-radius:0.4em;
}

.chat {
	background-color:var(--bg-carte-chat);
	color:var(--texte-carte-chat);
	transition:background-color 0.5s linear;
}
.chat:hover {
	background-color:var(--bg-carte-chat-hover);
	color:var(--texte-carte-chat);
	transition:background-color 0.5s linear;
}
.vieuxchat {
	background-color:var(--bg-carte-vieuxchat);
	color:var(--texte-carte-vieuxchat);
	transition:background-color 0.5s linear;
}
.vieuxchat:hover {
	background-color:var(--bg-carte-vieuxchat-hover);
	color:var(--texte-carte-vieuxchat);
	transition:background-color 0.5s linear;
}

.unchat {
	flex:1 0 auto;
	align-self:stretch;
	display:block;
	margin:1em;
	padding:1em;
	background-color:transparent;
	color:var(--texte-principal);
	width:95%;
	border-radius:0.4em;
}

.photos {
	display:flex;					/* sera le conteneur d'une boîte flexible */
	flex-flow:row wrap;				/* direction et renvoi */
	justify-content:space-around;		/* aligner sur l'axe de base (de flex-flow), ici : ligne */
	align-items:flex-start;			/* aligner sur l'axe secondaire (pas de flex-flow), ici : colonne */
	margin:1em;
	padding:1em;
	background-color:transparent;
	color:var(--texte-principal);
	width:95%;
	border-radius:0.4em;
}

.photos > figure {
	flex:1 0 auto;
	align-self:center;
	display:block;
	margin:1em;
	padding:1em;
	width:21%;
	border-radius:0.4em;
	background-color:var(--bg-carte-chat);
	color:var(--texte-carte-chat);
	transition:background-color 0.5s linear;
}

.photos > figure:hover {
	background-color:var(--bg-carte-chat-hover);
	color:var(--texte-carte-chat);
	transition:background-color 0.5s linear;
}