:root {
  --md-accent-fg-color: #163C99 !important;
}



/*********************************/
/*                               */
/*          Les titres           */
/*                               */
/*********************************/
@font-face {
	font-family: 'FAFERS';
	src: url(FAFERS_Technical_Font.ttf);
	}

/*h1{
	font-size:3rem!important;
	color:white!important;
	font-weight: bold!important;
	background-color:#163c99;
	border: 5px ridge #163c99;
	border-radius:10px;
	text-align:center;
	font-weight:bold;
}*/

h1 {
	margin: 5px auto !important;
	padding: 20px 150px 10px 165px;
	height: 150px;						/* hauteur du bloc */
	width: 668px;
	font-family: FAFERS;
	font-weight: bold!important;
	color: #163c99!important;
	background-image: url(Images_css/Titre_Chapitre_2.png) ;
	background-position: 50% 0!important;
	background-repeat: no-repeat;
	z-index: 5;
	font-size: 2.3em!important;					/* Taille de base de la police */
	text-align: center !important;				/* position horizontale du texte */
	vertical-align: middle!important;
}

h2 {
	color: #163c99;
	font-family: FAFERS;
	font-size: 2.4em !important;
	font-weight: bold !important;
	text-align: left;
	background-image: url(Images_css/Sous_Titre.png);
	background-position: 0% 99%;
	background-repeat: no-repeat;
	background-size: 700px;
	line-height: 60px;
  	margin: 50px 0 20px -15px !important;
	padding: 0px 0px 3px 85px !important;
	border: 0;
	clear:both;
}

h2.exercice{
	padding: 0px!important;
	background-image: none;
	font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:2rem!important;
	color:white!important;
	font-weight: bold!important;
	background-color:#007100;
	border: 5px ridge #007100;
	border-radius:10px;
	text-align:center;
}

h2.algorithme{
	padding: 0px!important;
	background-image: none;
	font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
	color:white!important;
	font-weight: bold!important;
	border-radius:10px;
	text-align:center;
	background-color:#e46e0a;
	border: 5px ridge #e46e0a;
}

h3 {
	color: #163c99!important;		/*#e46e0a*/
	text-align: left;
	font-weight: bold!important;
	text-decoration : underline;
	margin: 25px 0 0 0;
	padding: 0px 10px 0px 40px;
	font-size:0.9em;
	}

/*********************************/
/*                               */
/*      Les mises en valeur      */
/*                               */
/*********************************/

.leger,
.gris {
	color: #7F7F7F;
	}

.encadre{
	padding: 5px;
    border: 3px solid #fb8007;
	border-radius: 6px;
	clear: both;
	}	

code {
	font-weight: bold!important;
	background-color: transparent!important;
	box-shadow: none!important;
	}

h2.algorithme code,
h2.exercice code {
	color: white!important;
	}

.source {
	text-align: right;
	}

.source a{
	display: inline-block;
	font-size: 11px;
	background-color: #163c99;
	border: 2px solid #163c99;
	border-radius: 10px;
	padding: 3px;
	color: white!important;
	font-weight: bold;
	}

.source a:hover {
	background-color: white;
	color: #163c99!important;
	}

sub {
	font-size: 0.8em;
    vertical-align: -0.5em;
	}

sup {
	font-size: 0.8em;
    vertical-align: 0.5em;
    margin-left: -0.1em !important;
	}

strong {
	color: #e46e0a!important;
	}

.gras {
	font-weight: bold;
	}

.cleprim {
	text-decoration: underline;
	}




/* ------------------------------------------------------------------------- */
/*                                Les images                                 */
/* ------------------------------------------------------------------------- */
video{
	width: 100%;
	border-radius: 6px;
	border: 1px dashed #163c99;
	box-shadow: 5px 10px 18px #888888;
}

img{
	display: block;
	margin: auto;
	padding: 3px;
	max-height: 400px;
    border-radius: 6px;
	border: 1px dashed #163c99;
	box-shadow: 5px 10px 18px #888888;
}

img.img_centre {
	display: block;
	border: 1px dashed #163c99;
	margin: 5px auto;
	border-radius: 6px;
	padding: 5px;
	max-width: 75%;
	text-align: center;
	}

img.img_gde {
	max-height: 600px;
	}

img.img_flotte {							/* Image flottante à côté d'un paragraphe */
	float: right;
	max-width: 250px;
	margin: 5px 5px 5px 30px;
	padding: 5px;
	border: 1px dashed #163c99;
	border-radius: 6px;
	}

p img.logo,
li img.logo,
h2 img.logo {									/* images dans les paragraphes, dans les listes */
	display: inline;
	max-height: 40px;
	margin: 5px;
	padding: 0;
	vertical-align: middle;
	border: 0;
	border-radius: 4px;
	}

/* ------------------------------------------------------------------------- */
/*                                Les onglets                                */
/* ------------------------------------------------------------------------- */
.note,
.info,
.example,
.tip,
.danger,
.attention,
.solution,
.important,
.question{
	font-size:0.8rem!important;
	}

.note .mjx-mi,
.info .mjx-mi,
.example .mjx-mi,
.tip .mjx-mi,
.danger .mjx-mi,
.attention .mjx-mi,
.solution .mjx-mi,
.important .mjx-mi,
.question .mjx-mi,

.note .mjx-mtext,
.info .mjx-mtext,
.example .mjx-mtext,
.tip .mjx-mtext,
.danger .mjx-mtext,
.attention .mjx-mtext,
.solution .mjx-mtext,
.important .mjx-mtext,
.question .mjx-mtext{
	font-size:0.9rem!important;
	}

.note .mjx-sub,
.info .mjx-sub,
.example .mjx-sub,
.tip .mjx-sub,
.danger .mjx-sub,
.attention .mjx-sub,
.solution .mjx-sub,
.important .mjx-sub,
.question .mjx-sub,

.note .mjx-sup,
.info .mjx-sup,
.example .mjx-sup,
.tip .mjx-sup,
.danger .mjx-sup,
.attention .mjx-sup,
.solution .mjx-sup,
.important .mjx-sup,
.question .mjx-sup{
	font-size:0.6rem!important;
	}

.note pre span,
.info pre span,
.example pre span,
.tip pre span,
.danger pre span,
.attention pre span,
.solution pre span,
.important pre span,
.question pre span{
	font-size:85%!important;
	}



/* ------------------------------------------------------------------------- */
/*                            Les onglets - tabbed                           */
/* ------------------------------------------------------------------------- */
.tabbed-set {
    border-left: 4px solid #FFAA00;
    border-radius: 4px;
}

.tabbed-set label {
    background-color: #F7F9FF;
    font-size: 1em !important;
}

.tabbed-set .tabbed-content {
    padding: 10px;
}

/* ------------------------------------------------------------------------- */
/*                              Tableau abstrait                             */
/* ------------------------------------------------------------------------- */
table.tableau {
	margin: 5px 0;
	}

table.tableau td {
	padding: 5px 15px;
	border: 1px solid black;
	}

table.tableau td:first-of-type {
	padding: 5px 15px;
	border: 1px solid transparent;
	}


/* ------------------------------------------------------------------------- */
/*                              Les codes informatiques                             */
/* ------------------------------------------------------------------------- */
table.highlighttable {
	border: 1px solid #163c99;
	border-radius: 4px !important;
	}

table.highlighttable td.linenos{
	border-right: 1px solid #163c99;
	background-color: #EDEDED;
	}

table.highlighttable td.linenos div.linenodiv{
	box-shadow: none;
	}

table.highlighttable td.code,
div.highlight{
	background-color: #F5F5F5;
	}


/* ------------------------------------------------------------------------- */
/*                                Les tables                                 */
/* ------------------------------------------------------------------------- */


table.classique {
	margin: 10px auto;
	border: 2px solid #163c99;
	}

table.classique th {
	min-width: 90px;
	padding: 5px;
	vertical-align: middle;
	border: 1px solid #e46e0a;
	text-align: center;
	font-weight: bold;
	color: black !important;
	background-color: lightgrey !important;
	}

table.classique td {
	min-width: 90px;
	text-align: center;
	padding: 5px;
	vertical-align: middle;
	border: 1px solid #e46e0a;
	}

table.donnees tr:nth-of-type(2n+1){
	background-color: lightgrey !important;
	}

table.etroit th {
	min-width: 50px;
	}

table.etroit td {
	min-width: 50px;
	}


/* ------------------------------------------------------------------------- */
/*                              Les boutons                                  */
/* ------------------------------------------------------------------------- */
#mon_bouton,
.mon_bouton {
	color: #014495;
	font-weight: bold;
	padding: 5px;
	border: 3px solid #014495;
	border-radius: 5px;
	box-shadow: 4px 4px 4px #014495;
	cursor: pointer;
	}

table.tableau td:first-of-type {
	padding: 5px 15px;
	border: 1px solid transparent;
	}


@media print {

    h1{
        font-size:20pt!important;
        color:black!important;
        background-color:white!important;
        border: 1px solid black;
        border-radius: 0px;
        text-align:center;
        font-weight:bold;
    }
    
    h2{
        font-size:12pt!important;
        color:black!important;
        background-color:white!important;
        border: 1px dashed #aaa;
        border-radius:3pt;
        text-align:center;
    }


    .solution{
        display: none!important;
    }
}


/* ------------------------------------------------------------------------- */
/*                      Les tuiles des pages d'accueil                       */
/* ------------------------------------------------------------------------- */
div.tuiles {
	display: flex;
	flex-wrap: wrap;
    }

div.tuile {
	position: relative;
	margin: 5px 15px 0px 30px;
	}

div.tuile>a {
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: black;
	border: 0;
	cursor: pointer;
	}

div.tuile>a:hover {
	border-radius: 0;
	}	
	
div.tuile img{
	position: absolute;
	top: 15px;
	left: -30px;
	width: 80px;
	height: 80px;
	background: white;
	border: 1px solid #e46e0a;
	border-radius: 8px;
	}	

div.tuile>a:hover img{
	border: 1px solid transparent;
	box-shadow: -1px 2px 5px #ffab63,
                0 -1px 0 white;
	transform: rotate(-15deg);
	transition: 0.5s
	}
	
div.tuile p {
	box-sizing: border-box;
	width: 240px;
	height: 80px;
	padding-left: 60px;
	padding-right: 10px;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	font-weight: bold;
	text-shadow: 0px 1px 0px black;
	background: linear-gradient(#f89138, #e46e0a);
	border-radius: 10px;
	box-shadow: -1px 2px 5px #ffab63,
                0 -1px 0 white;
	cursor: pointer;
	}
	
div.tuile>a:hover p{
	color: #e46e0a;
	background: #ffffff;
	transition: 0.5s
	}