@charset "utf-8";

/*

Fichier CSS principal des notes d'Ailothaen.

Sommaire :
1. Variables
2. Imports
3. Structure : l'arrangement des containers majeurs
4. Règles responsive : ce qui est influencé par la taille de l'écran est regroupé ici
5. Structure du #col_main : la partie droite (et principale) des pages
6. Structure du #col_side : la partie gauche des pages
7. Éléments des pages : les éléments dans le texte des pages (<a>, <blockquote>... ...)
8. Commentaires
9. Mode nuit
10. Divers : les tags qui n'entrent pas dans une catégorie précise (les <i> pour la fonticon, par exemple)

*/


/* ------------------------------- */
/* 1. Variables                    */
/* ------------------------------- */

/* nothing */


/* ------------------------------- */
/* 2. Imports                      */
/* ------------------------------- */

@font-face
{
font-family: "Icons";
font-style: normal;
src: url('/?tf=/font/Icons.woff');
}

@font-face
{
font-family: "Bubblegum";
font-style: normal;
src: url('/?tf=/font/BubblegumSans.woff');
}

@font-face
{
font-family: "Source Sans Pro";
font-weight: 400;
font-style: normal;
src: url('/?tf=/font/SourceSansPro-Regular.woff');
}

@font-face
{
font-family: "Source Sans Pro";
font-weight: 700;
font-style: normal;
src: url('/?tf=/font/SourceSansPro-Bold.woff');
}

@font-face
{
font-family: "Source Sans Pro";
font-weight: 400;
font-style: italic;
src: url('/?tf=/font/SourceSansPro-Italic.woff');
}

@font-face
{
font-family: "Source Sans Pro";
font-weight: 700;
font-style: italic;
src: url('/?tf=/font/SourceSansPro-BoldItalic.woff');
}


/* ------------------------------- */
/* 3. Structure                    */
/* ------------------------------- */

*
{
box-sizing: border-box;
letter-spacing: 0.01em;
word-spacing: 0.015em;
line-height: 1.35em;
}

html
{
min-height: 100%;
font-family: 'Source Sans Pro', Arial;
font-size: 18px;
}

/* Contient la barre qui contient le bouton pour afficher le menu en vue mobile. */
#container_responsiveMenu 
{
flex: 0 0 80px;
padding: 40px 0px;
text-align: center;
color: white;
background-color: #151515;
}

/* Conteneur général, qui contient... tout le reste du site, en fait. */
#container_content
{
display: flex;
flex: 0 0 100%;
flex-direction: row;
min-height: 100vh;
}

#col_main, #col_side
{
min-height: 100%;
}

/* Colonne centrale, contenant le titre du site et la page. */
#col_main
{
flex: 1 1 auto;
background-image: url('/?tf=/background/header/default.jpg'), url('/?tf=/background/tile.png');
background-attachment: scroll;
background-repeat: no-repeat, repeat;
}

/* Sur les très grands écrans (> 1080p), on adapte le background pour être sûr qu'il couvre toute la largeur. */
@media screen and (min-width: 1921px)
{	
	#col_main
	{
	background-size: 100%, auto;
	}
}

/* Colonne latérale, contenant le menu de navigation et quelques autres trucs annexes (footer, description). */
#col_side
{
padding: 20px;
color: white;
background-color: #353b48;
}


/* ------------------------------- */
/* 4. Règles responsive            */
/* ------------------------------- */

/* Grand écran : #col_main et #col_side visibles. Marges sur les côtés du main. */
@media screen and (min-width: 1250px)
{			
	#container_responsiveMenu 
	{
	display: none;
	}
	
	#col_side
	{
	display: block;
	flex: 0 0 350px;
	}
	
	#col_side_fixedContainer
	{
	display: flex;
	position: fixed;
	flex-direction: column;
	min-height: calc(100% - 40px); /* 40px = 2*padding aside */	
	width: 310px; /* #col_side width - 2* #col_side padding */
	}
	
	#col_main
	{
	padding: 40px 40px 10px 40px;
	}

	article, section.basicContainer, section#commentAdd #commentForm
	{
	max-width: 1800px; /* limite la taille sur les très grands écrans */
	border-radius: 3px;
	box-shadow: 1px 1px 10px black;
	}
}

/* Petit écran : #col_main visible uniquement, #container_responsiveMenu contient le bouton pour remplacer #col_main par #col_side. Marges sur les côtés de #col_main. */
@media screen and (max-width: 1249px) and (min-width: 1000px)
{
	#container_responsiveMenu 
	{
	display: block;
	}
	
	#col_side
	{
	display: none;
	}
	
	body.state_menuResponsiveActive #col_side
	{
	display: block;
	flex: 0 0 100%;
	}
	
	body.state_menuResponsiveActive #col_side #col_side_fixedContainer
	{
	display: flex;
	flex-direction: column;
	min-height: calc(100% - 40px); /* 40px = 2*padding aside */	
	width: 100%;
	}
	
	body.state_menuResponsiveActive #col_content
	{
	display: none;
	}
	
	#col_main
	{
	padding: 20px 20px 5px 20px;
	}
	
	article, section.basicContainer, section#commentAdd #commentForm
	{
	border-radius: 3px;
	box-shadow: 1px 1px 10px black;
	}
}

/* Écran mobile : #col_main visible uniquement, #container_responsiveMenu contient le bouton pour remplacer #col_main par #col_side. Pas de marges sur les côtés de #col_main. */
@media screen and (max-width: 999px)
{
	#container_responsiveMenu 
	{
	display: block;
	}
	
	#col_side
	{
	display: none;
	}
	
	body.state_menuResponsiveActive #col_side
	{
	display: block;
	flex: 0 0 100%;
	}
	
	body.state_menuResponsiveActive #col_side #col_side_fixedContainer
	{
	display: flex;
	flex-direction: column;
	min-height: calc(100% - 40px); /* 40px = 2*padding aside */	
	width: 100%;
	}
	
	body.state_menuResponsiveActive #col_content
	{
	display: none;
	}
	
	#col_main
	{
	padding: 0px;
	}
	
	article, section.basicContainer, section#commentAdd #commentForm
	{
	border-radius: 0px;
	box-shadow: none;
	}
}

/* Style spécial imprimante (ou export PDF...) */
@media print
{
	#col_side
	{
	display: none;
	}

	#col_main
	{
	padding: 0px;
	background: none;
	}

	article, section.basicContainer, section#commentAdd #commentForm
	{
	margin: 0;
	background-color: white;
	box-shadow: none;
	border-radius: 0px;
	box-shadow: none;
	border: 1px solid black;
	}

	#commentAdd
	{
	display: none;
	}

	#container_responsiveMenu
	{
	display: none;
	}

	h2
	{
	color: black;
	}

	#footerPrint
	{
	display: block!important;
	text-align: center;
	}
}


/* ------------------------------- */
/* 5. Structure du #col_main       */
/* ------------------------------- */

/* Bloc contenant le titre du site. */
header
{
display: block;
margin: 0px;
padding: 75px 0px;
font-family: 'Bubblegum';
font-size: 70px;
text-align: center;
color: #fcfcfc;
text-shadow: 0px 0px 8px black;
}

article, section.basicContainer, section#commentAdd #commentForm
{
display: block;
margin: 20px auto 50px auto;
padding: 20px;
background-color: #f3f3f3;
}

article header, section.basicContainer header
{
padding: 0px 0px 20px 0px;
font-size: initial; /* on réinitialise les propriétés car elles sont héritées de header (ce qu'on ne veut pas) */
color: black;
border-bottom: 1px solid #909090;
text-shadow: none;
}

article footer, section.basicContainer footer
{
display: flex;
padding: 20px 0px 0px 0px;
font-size: initial; /* on réinitialise les propriétés car elles sont héritées de header (ce qu'on ne veut pas) */
clear: both;
color: black;
border-top: 1px solid #909090;
text-shadow: none;
}

article footer .commentCount
{
display: inline-block;
flex: 0 1 50%;
line-height: 1.5em;
text-align: left;
}

article footer .commentCount img
{
display: inline-block;
height: 24px;
vertical-align: middle;
border: none;
}

article footer .tagsList
{
display: inline-block;
flex: 0 1 50%;
text-align: right;
}

/* Image sur les aperçus. On met une margin-bottom car sinon elle touche la ligne du footer */
article .entryBanner
{
margin-bottom: 10px;
}

/* Footer pour les impressions. Normalement pas affiché */
#footerPrint
{
display: none;
}


/* ------------------------------- */
/* 6. Structure du #col_side       */
/* ------------------------------- */

aside
{
flex: 0 0 auto;
font-size: 16px;
}

nav
{
flex: 1 0 auto;
margin-top: 30px;
}

nav a, nav a:visited
{
display: block;
padding: 10px 0px;
font-family: Bubblegum;
font-size: 20px;
text-decoration: none;
color: white;
border-bottom: 1px solid #181a20;
}

nav a:first-child
{
border-top: 1px solid #181a20;
}

/* Liens menu jaunes */
nav a.navlink_index:hover
{
border-right: 3px solid #fbc531;
color: #fbc531;
}

/* Liens menu bleus */
nav a.navlink_inside:hover
{
border-right: 3px solid #00a7bf;
color: #00a7bf;
}

/* Lien menu violets */
nav a.navlink_outside:hover
{
border-right: 3px solid #8c7ae6;
color: #8c7ae6;
}

/* Recherche */
nav span#search
{
display: block;
padding: 10px 0px;
border-bottom: 1px solid #181a20;
}

footer
{
flex: 0 0 auto;
text-align: center;
font-size: 14px;
color: #808080;
}


/* ------------------------------- */
/* 7. Éléments des pages           */
/* ------------------------------- */

/* Titre d'une page */
h1, section.basicContainer h1
{
margin: 0px 0px 5px 0px;
font-family: 'Bubblegum';
font-size: 35px;
font-weight: 300;
}

time, header small
{
font-family: 'Source Sans Pro';
font-size: 16px;
}

/* titre chapitre */
article h2, section.basicContainer h2
{
margin-top: 50px;
margin-bottom: 25px;
padding-left: 15px;
text-align: left;
font-size: 26px;
font-weight: 600;
color: #e84118;
}

/* "ajouter un commentaire" et "n commentaires" */
h2
{
color: white;
font-weight: 500;
}

/* titre section */
article h3, section.basicContainer h3
{
margin-top: 25px;
margin-bottom: 20px;
padding-left: 30px;
text-align: left;
font-size: 22px;
font-weight: 600;
color: #4cd137;
}

/* titre sous-section (rare) */
article h4, section.basicContainer h4
{
margin-top: 25px;
margin-bottom: 20px;
padding-left: 40px;
text-align: left;
font-size: 22px;
font-weight: 600;
color: #718093;
}

a, a:visited
{
color: #00a8ff;
}

a:hover, a:active
{
text-decoration: none;
}

article p, section.basicContainer p
{
line-height: 1.5em;
letter-spacing: 0.03em;
}

article img, article iframe, section.basicContainer img, section.basicContainer iframe
{
display: block;
margin: 0px auto; /* center */
max-width: 90%;
padding: 2px;
border: 1px solid #d0d0d0;
}

article figure, section.basicContainer figure
{
margin: 0px;
}

article figcaption, section.basicContainer figcaption
{
padding-top: 5px;
text-align: center;
font-size: 14px;
}

article p:first-child, section.basicContainer p:first-child
{
margin-top: 0px; /* pour ne pas avoir une marge au début */
}

pre
{
white-space: pre-wrap;
/* C'est un bordel total ce truc. Impossible de faire marcher cette merde de overflow-wrap: break-word; alors on break-all. Tant pis. */
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
hyphens: auto;
}

code
{
display: block;
padding: 5px 10px;
border-left: 5px solid #487eb0;
font-family: 'Consolas';
background-color: #202020;
color: white; /* par défaut, hljs passe derrière */
}

blockquote, output
{
display: block;
margin: 1em 0px; /* enlève la marge du navigateur sur les côtés tout en gardant celle en haut et en bas */
padding: 5px 10px;
border-left: 5px solid #fbc531;
background-color: #ffe9ab;
}

blockquote.green, output.green
{
border-left: 5px solid #4fff2d;
background-color: #abffb0;
}

blockquote.red, output.red
{
border-left: 5px solid #ff2d2d;
background-color: #ffabab;
}

blockquote.blue, output.blue
{
border-left: 5px solid #2d8fff;
background-color: #ffabab;
}

kbd
{
display: inline-block;
padding: 0px 4px;
font-family: 'Consolas';
background-color: #e9e9e9;
border: 1px solid #a5a5a5;
border-radius: 3px;
}

abbr
{
cursor: help;
border-bottom: 1px dotted #808080;
}

span.spoiler
{
background-color: black;
}

span.spoiler:hover
{
background-color: initial;
border: 1px dashed #a5a5a5;
}

span.spoiler a
{
color: black;
}

span.spoiler:hover a
{
color: #00a8ff;
}

span.tag, span.tag-colored
{
display: inline-block;
padding: 0px 4px;
margin: 0px 5px;
border-radius: 3px;
border: 1px solid #a5a5a5;
}

img.emoji
{
display: inline;
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
padding: 0;
vertical-align: -0.1em;
border: none;
filter: drop-shadow(0px 0px 1px black);
}


/* ------------------------------- */
/* 8. Commentaires                 */
/* ------------------------------- */

section#comments
{
margin: 30px auto 50px auto;
}

section#comments article
{
display: flex;
margin: 30px auto;
padding: 0px;
background-color: transparent;
border-radius: 0px;
box-shadow: none;
}

section#comments article .meta
{
flex: 0 0 150px;
text-align: center;
color: #f3f3f3;
overflow-x: hidden;
text-overflow: ellipsis; /* pour avoir des "..." si jamais quelqu'un s'amuse à mettre un pseudo hyper long */
}

section#comments article .meta .identicon
{
width: 60px;
height: 60px;
margin: 8px auto;
padding: 4px;
box-sizing: content-box; /* Exceptionnel ici, pour ne pas se prendre la tête avec les dimensions de l'icône. */
background-color: #f3f3f3;
border-radius: 2px;
}

section#comments article .comment
{
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 10px;
background-color: #f3f3f3;
text-align: left;
border-radius: 2px;
box-shadow: 1px 1px 10px black;
}

section#commentAdd #commentForm
{
text-align: center;
}

section#commentAdd #commentForm .commentFormMeta 
{
display: flex;
}

section#commentAdd #commentForm .commentFormMeta .commentFormMetaLabels
{
flex: 1 1 50%;
text-align: right;
}

section#commentAdd #commentForm .commentFormMeta .commentFormMetaLabels p
{
margin-right: 5px;
margin-bottom: 20px;
padding-right: 5px;
border-right: 1px solid black;
}

section#commentAdd #commentForm .commentFormMeta .commentFormMetaFields
{
flex: 1 1 50%;
text-align: left;
}


/* ------------------------------- */
/* 9. Mode nuit                    */
/* ------------------------------- */

body.nightmode article,
body.nightmode section.basicContainer,
body.nightmode article footer, body.nightmode section.basicContainer footer,
body.nightmode section#comments article .comment,
body.nightmode section.basicContainer article .comment,
body.nightmode .nolink, body.nightmode .nolink:hover, body.nightmode .nolink:active, body.nightmode .nolink:visited,
body.nightmode section#commentAdd #commentForm
{
color: #f3f3f3;
background-color: #151515;	
}

body.nightmode kbd
{
color: #f3f3f3;
background-color: #202020;	
}

body.nightmode header h1, body.nightmode header time
{
color: #f3f3f3;
}

body.nightmode blockquote, body.nightmode output
{
color: #f3f3f3;
background-color: #382b00;	
}

body.nightmode blockquote.green, body.nightmode output.green
{
color: #f3f3f3;
background-color: #003e15;	
}

body.nightmode blockquote.red, body.nightmode output.red
{
color: #f3f3f3;
background-color: #3e0000;	
}

body.nightmode blockquote.blue, body.nightmode output.blue
{
color: #f3f3f3;
background-color: #00233e;	
}

body.nightmode span.spoiler
{
background-color: white;
}

body.nightmode span.spoiler:hover
{
background-color: #151515;
border: 1px dashed #a5a5a5;
}

body.nightmode section#commentAdd #commentForm .commentFormMeta .commentFormMetaLabels p
{
border-right: 1px solid white;
}


/* ------------------------------- */
/* 10. Divers                       */
/* ------------------------------- */

i
{
font-family: 'Icons';
font-style: normal;
}

/* Ne colore pas les liens (utilisé notamment dans les <h1>) */
.nolink, .nolink:hover, .nolink:active, .nolink:visited
{
color: black;
text-decoration: none;
}

/* Couleurs des boutons */
.pure-button
{
cursor: pointer;
}

.pure-button-blue
{
background-color: #0097e6;
color: white;
}

.pure-button-yellow, .pure-button-daymode
{
background-color: #e1b12c;
}

.pure-button-green
{
background-color: #44bd32;
}

.pure-button-red
{
background-color: #c23616;
}

.pure-button-grey
{
background-color: #7f8fa6;
color: white;
}

.pure-button-nightmode
{
background-color: #192a56;
color: white;
}

.note
{
display: flex;
margin: 1.25rem auto;
height: 2.5rem;
width: 12rem;
text-align: center;
font-size: 1.3rem;
border: 1px solid #505050;
border-radius: 10px;
box-shadow: 2px 2px 5px #505050;
}

.note-texte
{
flex: 0 0 55%;
line-height: 2.2rem;
}

.note-chiffre
{
flex: 0 0 45%;
line-height: 2.2rem;
border-radius: 0 10px 10px 0;
}

.note-chiffre.un { background-color: #250000; }
.note-chiffre.deux { background-color: #f30000; }
.note-chiffre.trois { background-color: #f30000; }
.note-chiffre.quatre { background-color: #f85c17; }
.note-chiffre.cinq { background-color: #f8b617; }
.note-chiffre.six { background-color: #e7df03; }
.note-chiffre.sept { background-color: #84de03; }
.note-chiffre.huit { background-color: #36ea32; }
.note-chiffre.neuf { background-color: #08d6e3; }
.note-chiffre.dix { background-color: #9d08e3; }