﻿body {
	background-color: #306840;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	font-family: "Open Sans","Helvetica Neue", Verdana, Helvetica,Arial,sans-serif;
	letter-spacing: 0.04rem;
	line-height: 1.3rem;
	/*background-size: 720px 720px;
	background-image: url('../images/fondvert.jpg');*/
	word-wrap:break-word; /* césure les mots qui dépassent du bloc */
}
#container {
	overflow: hidden;
	width: auto;
	padding: 0;
	width: 100%;
	margin: auto;
	color: #fff;
	position: relative;
}
#masthead {
	width: 100%;
	color: #C0C0C0;
}
#page_content {
	clear:both;
	display: block;
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	
	background-color: rgb(44,81,107);
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}
#md {
	display: block;
	overflow: hidden;
	margin: 0rem 0rem 0.3rem 0rem;
	background-color: #578338;
}
.float_left {
	float:left;
}
.float_right {
	float:right;
}
#logo {
	display: block;
	top: 0rem;
	left: 0rem;
	/*width: 9rem;*/
	height: 4rem;
	background-color: #756228;
	border-radius: 0rem 0rem 0.3rem 0.3rem;
	box-shadow: 0rem 0.1rem 0.2rem rgba(0, 0, 0, 0.25);
	vertical-align: middle;
}
@media screen and (max-width: 480px)
{
	#logo {
		max-width:3rem;
		max-height:1.5rem;
	}
}
#logo_ext {
	margin: 0 0 0 0.3rem;
}
.columns {
    width: 100%;
}
/*#column_l {
	position: relative;
	margin: 0 35rem 0 0;
	padding: 0 2%;
	background-color: #fff;
	float: none;
}
#column_r {
	float: none;
	width: 33rem;
	margin: 0;
	padding: 0.6rem;
	background-color: #cdf;
	position: absolute;
	right: 0rem;
	top: 0rem;
}*/
#footer {
	clear:both;
	background-color: #002522;
	color:#eee;
	overflow: hidden;
	width: auto;
  margin-left: auto;
  margin-right: auto;
}
.slide-left{
		float:none;
		display:none;
  /* normal width = 13em */
  width: calc(((100% - 60rem) / 2) - 2rem);
  min-height:1px;
  margin-right:1rem;
}
.slide-right{
		float:none;
		display:none;
  /* normal width = 13em */
  width: calc(((100% - 60rem) / 2) - 2rem);
  margin-left:1rem;
  min-height:1px;
}
@media screen and (min-width: 90rem)
{
	/* Seuls les grands écrans afficheront en 3 colonnes. Et seulement si le navigateur Web prend en compte ces styles conditionnels. */
	.slide-left{
		float:left;
		display:inherit;
	  }
	.slide-right{
		float:right;
		display:inherit;
	  }
	#page_content {
	  display:inline-block;
	  margin-left:inherit;
	  margin-right:inherit;
	  width:60rem;
	}
}
.container2{
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto; 
  
	/*flex: 1 1 auto;
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
	align-content:flex-start;
	align-items:flex-start;*/
}
.info-on-slide{
	background-color:#884;
	border:0.15rem #bb8 solid;
	border-radius: 0.8rem;		
	margin-bottom:1rem;
	padding:0.5rem;
	display:none;
}
/* Styles pour le titre */
#masthead img {
	float: left;
	margin: 0;
	padding: 0;
	vertical-align: top;
}
#masthead p {
	/*font-size: x-small;
	margin: 0.6rem 0.6rem 0.6rem 0;
	padding: 0;*/
}
#nh {
	background-color: #254671;
	width: 100%;
	margin: 0;
	padding: 0 0 0.1rem 0;
	border: 0;
	float: right;
}
/* Styles pour les éléments de nh */
#nh ul {
	list-style-type: none;
	float: right;
	margin: 0;
	padding: 0;
}
#nh li {
	float: left;
	margin-right:2rem;
	height: 1.6rem;
}
#nh a {
	color: silver;
	text-decoration: none;
	display: block;
	padding: 0.3rem;
}
#nh a:hover {
	color: #ccc;
	text-decoration: underline;
}
/* Styles pour les éléments de navigation */
.navigation {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	margin-top:0;
	margin-bottom:0;
	padding: 0.2rem;
	border: 0;
	overflow: hidden;
}
.navigation ul {
	list-style-type: none;
	margin: 0;
}
.navigation li {
	float: left;
	margin-right:2rem;
	margin-bottom: 0;
	overflow: hidden;
}
.navigation a {
	color: #FFFFFF;
	font-size: 1.15rem;
	text-decoration: none;
	display: block;
	padding: 0.3rem;
}
.navigation a:hover {
	text-decoration: underline;
}
/* Styles pour le contenu */
h1 {
	clear:both;
	margin: 2rem 0 4rem 0;
	font-size: 2rem;
	font-weight: normal;
	line-height:1.8rem;
	color: #69e;
	text-align: center;
}
h2 {
	margin: 1.8rem 0 1.2rem 0;
	font-size: 1.75rem;
	font-weight: normal;
	line-height:1.55rem;
	color: #69e;
}
h3 {
	margin: 1.2rem 0 1.2rem 0;
	font-size: 1.5rem;
	font-weight: normal;
	color: #69e;
}
h4 {
	margin: 1.2rem 0 1.2rem 0;
	font-size: 1.25rem;
	font-weight: normal;
	color: #69e;
}
h5 {
	margin: 1.2rem 0 1.2rem 0;
	font-size: 0.75rem;
	color: #69e;
}
h6 {
	margin: 1.2rem 0 1.2rem 0;
	font-size: 0.5rem;
	color: #69e;
}
/* Styles pour le pied de page */
#footer p {
	text-align: center;
	color: gray;
	margin: auto;
	padding: 0.06rem;
}
#footer ul {
	list-style-type: none;
	max-width:50rem;
	margin-left: auto;
	margin-right: auto;
	margin-top:0;
	margin-bottom:0;
	padding: 0;
}
#footer li {
	float: left;
	height: 1.8rem;
}
#footer a {
	color: silver;
	text-decoration: none;
	display: block;
	padding: 0.3rem 1rem 0.3rem 1rem;
	border-right-width: 0.12rem;
	border-right-style: solid;
	border-right-color: #002c1c;
}
#footer a:hover {
	color: #ccc;
	text-decoration: underline;
}
#footer2 {
	background-color:black;
	color:#eee;
	width: auto;
	clear: both;
	overflow: auto;
}
/* Styles pour le pied de page 2 */
#footer2 p {
	/*font-size: x-small;*/
	text-align: center;
	color: gray;
	font-size: 0.8rem;
	margin: 0.6rem;
	padding: 0.06rem;
}
/* Styles pour les liens */
a {
	color: #adf;
	text-decoration: none; /* pas souligné */
}
a:hover {
	color: #eb6;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}
pre {
	font-family:inherit;
	border: 0.12rem solid #a08000;
	padding: 0.4rem;
	background-color: #e0e090;
	color:black;
	 word-wrap:break-word; /* césure les mots qui sont trop longs pour une ligne */
	 white-space:pre-wrap; /* passe à la ligne aux espaces */
}
#mozToc {
	background-color: #204060;
	list-style-type: square;
	margin-bottom: 2.16rem;
	margin-left: 3em;
	margin-right: 3em;
	padding-top: 0.3em;
	border-width: 0.06rem;
	border-style:solid;
	border-color:#406080;
	border-radius: 2rem;
}
.code_source {
}
.liste_compacte {
	line-height: 1.2rem;
}
.liste_compacte li {
	margin-bottom:0.2rem;
}
.remarque {
	margin-left: 2rem;
	border-left-style: solid;
	border-width: 0.18rem;
	border-color: #696125;
	padding-left: 0.6rem;
	background-color:#797135;
}
td {
	text-align: center;
	border: 0.06rem solid #589;
	border-color: #457;
	border-style:solid;
}
th {
  text-align: center;
}
th, td { 
	padding: 0.18rem;
 }
table {
	border: 0.06rem solid #589;
	border-collapse: collapse;
	border-spacing: 0;
}
.table_header {
	text-align: center;
	border: 0.06rem solid #409040;
	background-color:#387848;
}
summary {
	cursor: zoom-in;
	display: block;
	padding-left:4rem;
	padding-right:2em;
	background-image:linear-gradient(205deg,rgba(0,0,0,0), rgba(0,0,0,0.07));
	/*border-top:thick rgba(0,0,0,0.07) solid;*/
	border-top:thick rgba(128,128,128,0.2) solid;
	/* de h2: */
	margin: 1.8rem 0 1.2rem 0;
	font-size: 1.4rem;
	font-weight: normal;
	line-height:1.55rem;
	color: #69e;	
}
details[open] summary {
	font-weight:bold;
}
/* Edge and IE 11 look 'details' partly as the 'summary' */
details {
display: block;
	margin-left:1rem;
}
details[open] {
	border-bottom:thick rgba(128,128,128,0.25) solid;
	border-left:thick rgba(128,128,128,0.25) solid;
	padding-left:1rem;
}
/* résumés ouverts: */
details[open] summary{
	/*background-color:rgba(128,128,128,0.2);*/
	cursor: zoom-out;
	padding-left:3rem;
}
code {
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	letter-spacing:0.08rem;
	background-color: rgba(60, 110, 80, 0.8);
	border-top:thin green dashed;
	border-bottom:thin green dashed;
	padding-left: 0.1rem;
	padding-right: 0.1rem;
}
ul {
	padding-left: 2.5em;
}
li {
    margin-bottom: 0.3rem;
}
.stronger {
	font-weight:900;
	font-size:xx-large;
	color:green;
}
/*.no-border table,th,td,tr*/
.no-border table
{
	border-style:none;
}
.hcentered{
    display: flex;
    justify-content: center;
    }
.no-top-margin {
	margin-top:0rem;
}
.ul-with-title{
	margin-top:0.3rem;
}
.compact-list{
	margin-bottom:0.15rem;
}
.small-text{
	font-size:x-small;
	font-weight:lighter;
	color:rgba(255,255,255,0.6);
}
.buybutton {
    font-weight: bold;
    margin-left:1rem;
    margin-right:1rem;
    white-space:nowrap; /* empêche un saut de ligne entre les deux parties */
}
.buybutton_left {
    display: inline-block;
    background-color: #283;
    font-size: 1.3rem;
    margin-bottom:1rem;
    padding: 0.54rem 0.6rem;
    padding-bottom: 0.6rem;
    border-radius: 0.3rem 0 0 0.3rem;
    color: #fff;
    margin-right:0rem;
}
.buybutton_right {
    display: inline-block;
    background-color: #fff;
    font-size: 1.4rem;
    padding: 0.54rem 0.6rem;
    padding-bottom: 0.6rem;
    border-radius: 0 0.3rem 0.3rem 0;
    color: #666;
    margin-left:-0.28rem;
    min-width:3.5rem;
}
.button{
    background-color: #283;
    font-size: 1.1rem;
    padding: 0.4rem 0.7rem 0.4rem 0.7rem;
    margin: 0.3rem 0.3rem 0.3rem 0.3rem;
    border-radius: 0.3rem;
    border:thin #283 outset;
    color: #fff;
    text-decoration:none;
}
a .button{
    text-decoration:none;
}
a:hover .button{
    background-color: #394;
    text-decoration:none
}
.touche-de-clavier{
    background-color: #233;
    font-size: 1.1rem;
    /*padding: 0.4rem 0.7rem 0.4rem 0.7rem;*/
    padding: 0 0.2rem 0 0.2rem;
    margin: 0.1rem 0.1rem 0.1rem 0.1rem;
    border-radius: 0.3rem;
    border:thin #233 outset;
    color: #fff;	
}
.panel_text{
    background-color: #fff;
    font-size: 1.1rem;
    padding: 0.4rem 0.7rem 0.4rem 0.7rem;
    margin: 0.3rem 0.3rem 0.3rem 0.3rem;
    border-radius: 0.3rem;
    border:thin black solid;
    color: #000;
}
strong {
	color:#ff6;
}
img{
	max-width:100%;
}
.bord_d_image{
	border:thin rgba(0,0,0,0.25) solid;
}
.bord-bas
{
	border-style:none;
	border-bottom-style:solid;
	border-bottom-color:rgba(0,0,0,0.15);
}
.sub-title-slide{
	background-color:rgba(128, 96, 0, 0.25);
	font-weight:bold;
	font-size:1.1rem;
	margin:-0.45em -0.45em 0.4em -0.45rem;
	margin-top:-0.45rem;
	padding-top:0.2rem;
	padding-bottom:0.3rem;
	text-align:center;
	text-shadow: #220 0.06rem 0.06rem 0.1rem;
}
/* Styles de zoom d'images: */
.minimized-picture {
	cursor: zoom-in;
	max-width: 45%;
}
.cModal {
	position: fixed;
	z-index: 99999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	pointer-events: none;
}
.cModal:target {
	opacity: 1;
	pointer-events: auto;
}
.cModal > div {
	position: relative;
	margin-top: 50vh; /* centrage: */ /* poussé de la moitié de hauteur de viewport */;
	margin-left: 50vw; /* poussé de la moitié de largeur de viewport */;
	transform: translate(-50%,-50%); /* tiré de la moitié de sa propre hauteur */;
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 0.12em;
	background: #fff;
}
.cModal > div > a {
	cursor: zoom-out;
}
em {
  font-style: normal;
  font-weight: bold;
}
img.centre {
	display: block;
	clear: both;
	margin-left: auto;
	margin-right: auto;
}
.ombrage_de_texte_plus_sombre {
	text-shadow: black 0.06rem 0.06rem 0.1rem;
	vertical-align: middle;
	color: white;
	font-size: large;
}
.question {
	border-style: none none dashed;
	border-color: #ffcc33;
	border-width: 0.06rem;
	color: #401800;
	background-color: #fff6db;
	margin-bottom: 0.3rem;
	font-size:1.2rem;
	/*text-shadow: lightslategray 0.12rem 0.06rem 0.1rem;*/
}
.reponse {
	margin-left: 3rem;
	margin-top: 0;
}
.auteur {
	display: inline-block;
	text-align: left;
	font-size: 1.6rem;
	color: #666;
	padding: 0.24rem 0.24rem 0 0.48rem;
}
.schema {
	text-align: center;
	font-size: 1.6rem;
	color: #6AA343;
	margin-top:2rem;
	margin-bottom:2rem;
}
.logo-allprogs{
	width:8rem;
	height:8.512rem;
	margin:0.8rem 2rem 1rem 2rem;
}
.discret{
	color: rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 480px)
{
	.logo-allprogs{
		width:2rem;
		height:2.128rem;
		margin:0.4rem 0.5rem 0.25rem 0.5rem;
	}
}
