@charset "utf-8";
/* auteur: Nathalie Bonnin */
/* Date de création: 16/07/2020 */

:root{
font-size:14px;
--tp:dimgrey; /* couleur pour texte principal */
--fcode:dimgray;/* couleur pour fond de code */
--fnum:darkgray;/*couleur de fond de la numerotation du code*/
--gris:#e9e9e9;/*un beau gris clair accordé à dimgray*/
--jaune:#ffffbb;/*pour postit et pquoi pas code*/
--quasiblanc:whitesmoke; /* */
--code:whitesmoke;/*texte de code 1*/
--com:lightyellow;/*couleur pour commentaires du code */
--fex:indianred; /* couleur de fond pour exercices */
--tex:lightyellow;/*couleur de texte pour exercices */
--ti:darkred;/*couleur de mise en évidence pour texte */
--fi:seashell;/*couleur de fond pour contenu important, couleur de texte des menus et du titre */
--bi:rosybrown;/*couleur de surlignement ou de bordure pour contenu important */
--contr1:khaki;/*couleur contrastante 1*/
--contr2:darkseagreen;/*couleur contrastabte 2 */
}

body{
		font-family:sans-serif;			
}

header{
position:sticky;
left:1rem;
width:100rem;
padding:0.25rem 0 0.25rem 6rem;
background:var(--bi);
color:var(--fi);
text-align:left;
font-size:2rem;
font-style:italic;
font-weight:lighter;
}

div.barregauche{
	position:fixed;
	left:1rem;
	top:4rem;
	width:18rem;
	height:57rem;
	padding:1rem 1rem 1rem 1rem;
	word-wrap:break-word;
	display:inline-block;
	overflow-x:hidden;
}

footer{
	position:sticky;
	bottom:0rem;
	}
	
div.license{
	font-size:10px;
	color:vr(--bi);
	position:static;
	width:17rem;
	height:5rem;
	display:block;
	padding:5rem 0;
	text-align:justify;	
}	

div.grille{
display:grid;
grid-template-colummns:repeat(5fr,1fr);
padding:0 0 2rem 0;
position:absolute;
left:23rem;
z-order:1;

}
div.barredroite{
	position:absolute;
	width:15rem;
	left:63rem;
	height:62rem;
	top:4rem;
	word-wrap:break-word;
	padding:1rem 1rem 1rem 3rem;
	display:inline-block;
	overflow-x:hidden; 
}
div.milieu {
	padding:0 1rem 0 1rem;
	height:62rem;
	width:62rem;
	display:inline-block;
	color:var(--tp);
}	

div.contenu {
	display:block;
	position:static;
	font-size:14px;
	width:60rem;
	padding:0 1rem 0 1rem;
	margin-top:1rem;
	margin-left:0;
	border-width:1px 0 0 0 ;
	border-style:solid;
	border-color:var(--tp);
	word-wrap:break-word;
	overflow-x:wrap;
	color:var(--tp);
	line-height:140%;
	text-align:justify;
	background:white;
}




aside.postit{
	background-color:var(--tex);
	border-width: 1px 3px 3px 1px;
	border-style:solid;
	border-color: var(--gris);
	border-radius:0 3px;
	font-size:10pt;
	color:var(--fex);
	font-style:italic;
	display:block;
	position:relative;
	z-index:1;
	width:12em;
	height:10em;
	left:1em;
	padding:1em;
	word-wrap:break-word;
    overflow-x:auto;
	}


	
ol.code{
background:var(--fnum);
border:solid var(--fcode);
color:var(--code);
list-style:lower roman outside;
font-family:consolas,lucida console,monospace;
font-size:14px;
line-height:110%;
text-align:left;
border-width:2px 0;
padding:0 0 0 4ch;
font-weight:bold;
overflow-y:auto;
overflow-x:wrap;
}	
 .code li{
 background:var(--tp);
 padding-left:1ch;
 }

span.code{
font-weight:bold;
background:var(--gris);
color:var(--tp);
font-family:consolas,lucida console,monospace;
font-size:14px;
}

span.com{
color:var(--com);
font-family:consolas,lucida console,monospace;
font-size:14px;
line-height:110%;
font-style:italic;
background:var(--tp);
}

hr{
color:var(--tp);
height:3px;
border-radius:2px;
width:calc(80%);
}

hr.plein{
border:none;
background:var(--gris);
height:4px;
width:calc(80%);
border-radius:3px;
}
   
H1{ 
font-family:sans-serif;
font-weight:lighter;
font-size:2.5rem;
text-align:center;
padding:1rem;
margin:1rem 2rem;
border-style:solid;
background-color:var(--fi);
border-width:1px 2px 2px 1px;
border-radius:3px;
border-color:var(--tp);
overflow-x:wrap;
line-height:110%;
	}

H2 {	
font-family:sans-serif;
font-weight:lighter;
font-size:1.8rem;
padding:2rem 0 0.25rem 1rem;
padding-bottom:0.25rem;
padding-left:1rem;
border-style:solid;
border-color:var(--tp);
border-width: 0 0 1px 0;

	}

H3 {
font-family:sans-serif;
font-weight:lighter;
padding:1rem 0 0 1.5rem;
font-size:1.3rem;
list-style:circle;
	}

H4 {
font-family:sans-serif;
font-weight:lighter;
font-size:1.2rem;
padding-left:2rem;
	}

H5 {
font-family:sans-serif;
font-size:1rem;
font-weight:bold;
padding-left:2.5rem;	
	}
	
H6 {
font-family:sans-serif;
font-weight:lighter;
font-style:italic;
font-size:1rem;
padding-left:2.5rem;	
	}

div.important{
	border-color:var(--ti); 
	border-style:solid;
	border-width:2px;
	border-radius:5px;
	padding: 1.5rem ;
	margin:1rem 0;
	background:var(--fi); 
	color:var(--ti);
	left: 20%;
	text-indent:0;
	text-align:justify;
	}


div.exercice{
	border-color:var(--fex); 
	border-style:solid;
	border-width:1px 1px 1px 10px;
	border-radius:3px;
	padding: 1em ;
	background-color:var(--code); 
	text-indent:0;
	text-align:justify;
	}
	

A{
color:inherit;
text-decoration:underline;
text-shadow:1px 1px 1px var(--gris);
}


em{
background:var(--fi);
}
	
strong{
background:var(--fi); 
font-weight:normal;
text-decoration:underline;
color:var(--ti);
}

.paragraphe{
	text-indent:2rem;
	margin-top:1rem;
}


div.important{
	padding:1rem;
	border:solid var(--tp);
    border-width:0 0 0 1rem;	
	background:var(--fex);
	color:var(--tex);
	margin:1em 0;
	overflow-y:auto;
    overflow-x:wrap;
}

div.exercice2{
	padding:1rem;
	border:solid var(--tp);
    border-width:0 0 0 1rem;	
	background:var(--contr1);
	color:var(--tp);
	margin:1em 0;
	opacity:0.90;
	overflow-y:auto;
    overflow-x:wrap;
	font-size:15px;
}


div.fond{
color:inherit;
background:var(--code);
padding:0.2rem 1rem;
}

div.pboite{
width:17rem;
float:top;
padding:0;
}

div.pchapeau{
margin:0 1rem 0 -1rem;
padding:0.2rem 1rem;
color:var(--tp);
background:var(--fi);
font-style:italic;
font-size:18px;
font-weight:bold;
border-radius:10px 50px;
/*
border-color:var(--gris);
border-style:ridge;*/
}


div.ptitre{
width:15rem;
border-radius:5px;
border:solid 1px var(--code);
background:var(--tp);
color:var(--code);
font-family:sans-serif;
font-weight:bold;
margin:0 1rem 0 0;
padding:1rem;
cursor:pointer;
word-wrap:break-word;
overflow-x:wrap;
}

div.pdetail{
list-style:square outside;
width:15rem;
margin:0 0 0 1rem;
background:var(--code);
color:var(--tp);
padding:1rem;
line-height:2rem;
word-wrap:break-word;
overflow-x:wrap;
}

A.ht{
	color:inherit;
	font-style:italic;
	}



div.masque{
	display:none;
	position:static;
	padding: 1em ;
	border:solid 1px var(--tp); 
	background:var(--fi);
	text-indent:0;
	}

div.ctrlmsq{
   font-weight:bold;
   width:10rem;
   padding:2px;
   border:outset 2px var(--code); 
   background:var(--fi);
   text-align:center;
   margin-left:0;
}
img.nu{
border-style:none;}

table.demorgan{
table-layout:fixed;
width:12rem;
height:10rem;
border-collapse:collapse;
background:var(--code);
color:var(--tp);
font-size:16px;
}


.demorgan th{
color:var(-tp);
text-align:center;
border:solid;
border-color:var(--bi);
font-weight:bold;
}

.demorgan td{
color:var(-tp);
text-align:center;
border:solid;
border-color:var(--bi);
}