/* créé par FK 2015 */
/* Modifs : 
	FIX001 12/11/2015 modif largeur écran 1024 en 1000
	FIX002 16/02/2016 ajout colonnage en nbre de colonnes déterminé, 
						refonte de la colorisation. Voir aussi le js ajouté dans ./deco/header.php 
	FIX003 20/02/2016 correction largeur items du menu pour ajouter un nouvel onglet
	FIX004 18/11/2020 ajout de styles : images : adroite, agauche, 
	FIX005 21/11/2020 ajout de styles : grid et un peu de responsive design pour ne pas faire de colonnage sur les vieux écrans 
*/
/*
notes sur les tailles d'écran pour un dev responsive ..
	Les points de rupture souvent utilisés pour un affichage « normal »  basé sur 960px de largeur:
		-			 X < 480px 	: smartphone en portrait
		-	 480px<= X < 960px 	: smartphone en paysage, tablette en portrait et petite tablette en paysage
		-	 960px<= X <=1280px : tablette en paysage, écran d'ordinateur de taille petite et moyenne
		-	1280px<	 X  		: grand écran d'ordinateur (21? et + en plein écran )
	
	Les dimensions courantes (2015-2020): 
		Ecran d'ordinateur (que l'on appelle « Desktop » )
			Ecrans « normaux » (15, 17 pouces) et grands écrans (21 pouce et + ).
			Taille de la fenêtre courantes
				- 1024px (obsolète)
				- 1280px
				- 1600px
				- 1920
		Tablette
			On retrouve généralement les largeurs suivantes:
				- 1024px format paysage
				-  740px format portrait
		Smartphone
			On peut isoler les grandes tendances:
				-  720px format paysage
				-  480px format portrait et format paysage de la taille en dessous
				-  320px format portrait
*/
/* Importation des familles de polices de caractères */
@font-face {font-family: 'textFont'; src: url('font/Louis George Cafe.ttf') format('truetype') ; font-weight: normal; font-style: normal; }
@font-face {font-family: 'titleFont'; src: url('font/Aaargh.otf') format('truetype') ; font-weight: normal; font-style: normal; }
@font-face {font-family: 'codeFont'; src: url('font/EingrantchMono-Medium.ttf') format('truetype') ; font-weight: normal; font-style: normal; }
@font-face {font-family: 'codeFont1'; src: url('font/Borgen.otf') format('truetype') ; font-weight: normal; font-style: normal; }
@font-face {font-family: 'codeFont2'; src: url('font/monof55_regular.ttf') format('truetype') ; font-weight: normal; font-style: normal; }
/* http://www.phpascal.com/programmation-web/CSS/ajout-police.html */

/*
*{font-family: textFont, Tahoma, Arial, sans-serif; margin:0;}
h1,h2,h3,h4 {font-family: titleFont, Tahoma, Arial, sans-serif;}
.matosFont {font-family: matosFont, Tahoma, Arial, sans-serif;}
.ideeFont {font-family: ideeFont, Tahoma, Arial, sans-serif;font-size:1.5em;color:#e90;}
.objetFont {font-family: objetFont, Tahoma, Arial, sans-serif;font-size:1.0em;color:#7f6;}
*/

/* /Importation des familles de polices de caractères */


/* couleurs, fonds cbd1aa*/
*{margin:0; text-align:justify;}
html {background: #f5f5f5;font-family:textFont, Tahoma, Arial, sans-serif; font-size:19px;}/*html {background: url("segami/textureClaire.jpg") repeat fixed;font-family:tahoma, arial; font-size:15px;}*/
a{text-decoration:none; }				/* FIX002 : ajout */
p a{color:#d18;}	/* FIX002 : ajout p devant */
p a:hover{background:rgba(250,0,128,.1)}
/* Styles du menu et de ses items */
/*couleurs*/
	nav {position:fixed; top:0; display:fixed;
	transition:all 1s; 
	height:40px; width:100%; z-index:1000;
	} /* height:2.2em; */
	
	nav, nav ul, nav li {background:#333; color:#fff;}
	nav li a, nav li span {color:#fff; }	/* FIX003 : définition modifiée, on applique la transition à l'étage au dessus */
	nav li {transition: 0.5s ease;	} /* FIX003 modifié */
	nav li li a, nav li span {text-align:left;margin-left:10px;}			/* FIX003 - 20/02/2016 les lignes sont collées à gauche */
	/* FIX003 nav li a:hover, nav li span:hover  : définition abandonnée, on applique la couleur à l'étage au dessus */
	nav>ul>li:hover {background:rgba(128,128,128,1);} 		/* changer la couleur au survol de la souris, tous liens ; FIX003 modifié */

	#nav0>li:active {background:rgba(128,255,128,0.5);} 		/* changer la couleur au survol de la souris */
	#nav0>li:nth-child(1) ul li 		{ background:#333; }								/* Accueil */
	#nav0>li:nth-child(1) ul li:hover 	{ background:#aaa; }
	#nav0>li:nth-child(2) ul li 		{ background:#0c7; }				/* HTML */
	#nav0>li:nth-child(2) ul li:hover 	{ background:#0d9; }	
	#nav0>li:nth-child(3) ul li 		{ background:#cc7; }				/* CSS */
	#nav0>li:nth-child(3) ul li:hover 	{ background:#dd9; }
	#nav0>li:nth-child(4) ul li 		{ background:#c07; }				/* SQL */
	#nav0>li:nth-child(4) ul li:hover	{ background:#d09; }
	#nav0>li:nth-child(5) ul li 		{ background:#07c; }				/* PHP */
	#nav0>li:nth-child(5) ul li:hover	{ background:#09d; }
	#nav0>li:nth-child(6) ul li 		{ background:#b44; }				/*Exercices*/
	#nav0>li:nth-child(6) ul li:hover	{ background:#d77; }
	#nav0>li:nth-child(7) ul li 		{ background:#aaa; }				/*Projets*/
	#nav0>li:nth-child(7) ul li:hover	{ background:#666; }
	#nav0>li:nth-child(8) ul li 		{ background:#333; }								/* Accueil */
	#nav0>li:nth-child(8) ul li:hover 	{ background:#aaa; }
	ul ul li{border:0 1px 0 1px #f55;} /*ombrage du menu */
	nav ul li ul li{box-shadow:5px 5px 10px #333;} /*ombre du menu n1 */

#piedDePage {background:#333;}
#piedDePage * {color:#999;}
#mainHeader 	{background:#555;font-family:titleFont, Tahoma, Arial, sans-serif;} /*ba1013*/
#mainHeader p, #mainHeader span	{color:#22eeff; text-align:center;}/*f0d500*/

article 		{background:#fff;}
	article:nth-child(odd) {background:rgba(255, 255, 255, 1);}
	article:nth-child(even) {background:rgba(250, 250, 250, 1);}

section header							{color:#4d1a33;font-family:titleFont, Tahoma, Arial, sans-serif;font-size:.8em;}
article header, section footer header	{color:#000;font-weight:bold;}/*4d1a33, 852c11*/
article header span.dot, footer header span.no_num_dot, article header span{background:#000;color:#f0d500;text-align:right;}/*border:1px solid #777;border-radius:5px 5px 5px 5px; }*/
	.dot::before {background: linear-gradient(0deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) );}
/*article 		{	background:trensparent;}*/
p{color:#555; }

.hr{width:100%;height:1px;margin:0px 0 0px 0;clear:both; /* fix003b */
	background-image: linear-gradient(to right, transparent,#aaa,#aaa,#aaa,transparent);
}
/* -- TABLE ------------------------ */
table, 
.liste	{border-collapse:collapse;border:1px solid black;background:rgba(255, 255, 248, .7)}
	th {text-align:center;}
	th, td {border:1px solid #ddd;padding:3px;}
	tr {color:#444;}
	tr:nth-child(odd) {background:rgba(0, 0, 0, .02);}
	/* tr:nth-child(even) {background:rgba(255, 255, 255, .5);}*/
	tr:first-child{	background:#ddd; color:#000;}

/* -- BLOCS ------------------------ */
.encart {background:#fdfaff;border:1px solid #559955;box-shadow:3px 3px 3px black;}
.remarque{background:#aaffaa;border:1px solid #559955;}
.remarque *:not(code, .php, .html, a) {background:#aaffaa;} /* exclure code, sinon le fond sera de la couleur de la remarque ... */
.important {background:#ffaaaa;border:1px solid #559955;}
.definition {background:#ccaaff;border:1px solid #559955;}

/* -- CODE ------------------------ */
/* voir en bas */

/* ================================================================ */
/* positionnement, structures */
/* 	body occupe toute la surface. 
	on utilise page pour restreindre la largeur d'affichage du texte.
	le pied de page peut alors être fixé au bas de l'écran si page est plus petit car le pied est défini dans body.
	le padding de page évite de superposer le contenu de page sur le pied si la page est plus grande.
	c'est une solution pour mettre de copy en bas de page, si celle-ci est moins grande que l'écran.
*/
html, z_body {height:100%;}
body {min-height:100%;position:relative;}
main {margin:0;margin-top:40px;} /* voir "min-width:1024px;" plus loin */
main {padding-bottom:154px;}
#piedDePage {position:absolute; bottom:0px;width:100%;text-align:center;margin-top:5px;}
#piedDePage div {text-align:center;margin-top:5px;}
p{padding:2px;}

/* -- LIENS EXT ------------------------ */
/* liens externes et image petite flèche */
a.ext{background-position:100% 50%;background-repeat:no-repeat;padding-right:13px;}
a.ext{background-image:linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cg%20transform%3D%22translate%28-826.429%20-698.791%29%22%3E%3Crect%20width%3D%225.982%22%20height%3D%225.982%22%20x%3D%22826.929%22%20y%3D%22702.309%22%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M831.194%20698.791h5.234v5.391l-1.571%201.545-1.31-1.31-2.725%202.725-2.689-2.689%202.808-2.808-1.311-1.311z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M835.424%20699.795l.022%204.885-1.817-1.817-2.881%202.881-1.228-1.228%202.881-2.881-1.851-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);}
a.ext:hover{background:transparent;
background-position:100% 50%;background-repeat:no-repeat;padding-right:13px;
background-image:linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cg%20transform%3D%22translate%28-826.429%20-698.791%29%22%3E%3Crect%20width%3D%225.982%22%20height%3D%225.982%22%20x%3D%22826.929%22%20y%3D%22702.309%22%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M831.194%20698.791h5.234v5.391l-1.571%201.545-1.31-1.31-2.725%202.725-2.689-2.689%202.808-2.808-1.311-1.311z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M835.424%20699.795l.022%204.885-1.817-1.817-2.881%202.881-1.228-1.228%202.881-2.881-1.851-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);}

/* -- MENU ------------------------ */
/* Styles du menu et de ses items */
/*positionnements*/
nav{zheight:25px;font-size:13px;} /*width:880px;margin:auto;}*/
	/* largeur du menu et des items : A changer pour une résolution inférieure à 1024 en largeur*/
	#page {min-width:840px;} /* FIX001 changé le 12/11/2015, anc. 1024 */
	#nav0{width:1000px;} 	nav li, nav a, nav span {width:115px;} /* FIX001 changé le 12/11/2015, anc. 1024px et anc. 146px rechangé le 20/02/2016 anc. 141px*/
							nav li li, nav li li a, nav li li span {width:160px;} /* FIX001 changé le 12/11/2015, anc. 1024px et anc. 146px FIX003 rechangé le 20/02/2016 anc. 141px*/
	
	nav a, nav span {text-align:center; }	/* FIX003 : définition modifiée, on applique la transition à l'étage au dessus */
	nav li li a, nav li li span {text-align:left;margin-left:10px;}			/* FIX003 - 20/02/2016 les lignes sont collées à gauche */

	/* .nav_ul = tous les ul dans nav */
	nav ul{padding:0;margin:auto;height:26px;list-style-type:none;text-align:center;} /* pas de marge ni de points */
	nav li {float:left;position:relative;padding:0; height:2; padding-left:5px; }			/* les lignes sont collées à gauche */
	ul.nav0>li:first-child {border-radius:0 0 15px 0; }			/* les lignes sont collées à gauche */
	nav a, nav span {float:left;padding:0;height:100%;}			/* les lignes sont collées à gauche */
	nav a, nav span {padding:5px 0 3px 0;} 							/* augmenter la hauteur de la 1ère cellule n1 pour que l'index ne recouvre pas le texte */
	nav ul ul {display:none;margin-top:0;} 						/* masquer les sous menus & coller la sous-liste n1 au menu n0 */
	nav li{display:block;padding:0;padding-bottom:0;}					/* les liens contenus aussi et on indique la largeur et marges intérieures */
	nav li:hover a, nav li:hover span{display:block;  }		/* les liens contenus aussi et on indique la largeur et marges intérieures */
	/* petite déco de la dernière cellule */
	nav li li:last-child, nav li li:last-child a {border-radius:0 0 9px 9px;} /*coins arrondis dernière cellule n1 */
	
	.nav1 li ul {position:absolute;z-index:50;}					/* afficher les sous listes en bloc au survol de l'item. note, l'item reste hover */
	/*.nav_li::after a{content:">";position:absolute;z-index:100;top:50%;right:10px;height:0;width:0;}*/
	
	/* faire apparaître la sous-liste n1 sur hover de n0 ; attn : left = -margin-left de "nav ul li" */
		nav li:hover .nav1, li li:hover .nav2 {display:block;position:absolute;z-index:100;margin-left:0;height:25px;}		/* afficher les sous listes en bloc au survol de l'item. note, l'item reste hover */
		nav li:hover .nav1 li, li li:hover .nav2 li{}		/* afficher les sous listes en bloc au survol de l'item. note, l'item reste hover */
		nav li:hover .nav1	{z-index:100;top:24px;left:0;margin-left:0;background:transparent;}		/* afficher les sous listes en bloc au survol de l'item. note, l'item reste hover */
		/* 146/2=73, 73-25 = 48, 48-2=46*/
		
		/* FIX001 12/11/2015 (ci dessous : nav li li:hover .nav2) position left anc.=46, est en relation avec width de #nav0 et nav li, ... */
		/* FIX003 position left anc.=41, est en relation avec width de #nav0 et nav li, ... */
		nav li li:hover .nav2	{z-index:100;top:0; left:60px;margin-left:100px;background:transparent;}		/* afficher les sous listes en bloc au survol de l'item. note, l'item reste hover */
	
	/* triangles de rappel de sous menus */
		nav li:hover .nav1::before {content:"";position:absolute;z-index:100;top:-5px;left:10px;height:0;width:0;border-bottom:10px solid red;border-left:10px solid transparent;border-right:10px solid transparent;} /* triangle pointe en haut */
		nav li li:hover .nav2::before {content:"";position:absolute;z-index:100;top:2.5px;left:-10px;height:0;width:0;border-right:10px solid red;border-top:10px solid transparent;border-bottom:10px solid transparent;} /* triangle pointe à gauche ; FIX003 modifié : positionnement anc.left=5px, centrage vertical anc.top=0 */


/* -- PAGE ------------------------ */
/* Page et sections */
	/*#mainHeader {font-size:36px;padding:5px;padding-top:3px;}*/
	#mainHeader p {font-size:48px;margin:0 5px;margin-bottom:30px;padding-bottom:7px;}
	section {}
	section header {padding-bottom:2px;font-size:38px;}
	section header span{display:none;} /* design de la puce de titre */
	
/* -- ARTICLE ------------------------ */
	article, section footer, section div.resume
		{position: relative;margin:auto;margin-top:0;width:90%;min-width:840px;padding:0;padding-bottom:5px;
		transition:0.5s ease;}
	article:not(:first-child) {margin-top:4em;} /* espacement des articles */
	
	article header span, article header span.dot, section footer header span{display:inline-block;width:100px;height:50px;margin-left:0;margin-right:10px;padding-right:3px;} /* design de la puce de titre */
		.dot::before {content:"";position:absolute;z-index:100;top:0;left:5px;height:50px;width:45px;background-size:11px 11px;}
	article header, section footer header {font-size:32px;}
	section div.artContent{width:85%;margin:auto;min-width:840px;}
	section div.resume{margin-bottom:10px;}	/* FIX002 ADD */

	/* FIX002 BEGIN ADD */

/* -- CONTENU ARTICLE ------------------------ */
/* Articles */
	/* DIV artContent : ouvrir/fermer les chapitres (contenus d'articles) */
		/* les DIV resumé ne sont pas impactées */
	section .rideau header {cursor:pointer;}
	.closed .artContent{display:none;height:0; }
	.expandable.closed .code{display:none;height:0; } /* afficher/masquer les styles */

	article p, section footer p {padding-left:5px;padding-right:0px;}
	
	/* titres de paragraphs dans les articles */
	h2:not(:first-child) {margin-top:2em;} /* espacement des titres */
	
/* -- COLONNAGE ------------------------ */
/* Colonnes */
	/* modif FIX005*/
	.col1,.col2,.col3,.col4 {}
	@media screen and (min-width: 1280px) { /* FIXX005 colonnage que pour les grands écrans */
		.col2 {-webkit-columns: 2;	-moz-columns: 2;	columns:2;  }
		.col3 {-webkit-columns: 3;	-moz-columns: 3;	columns:3;  }
		.col4 {-webkit-columns: 4;	-moz-columns: 4;	columns:4;  }
		.col1, .col2, .col3, .col4 {-webkit-column-rule: 1px solid #eee; -moz-column-rule: 1px dotted #eee; column-rule: 1px solid #eee; margin-bottom:6px; margin-top:3px;}
	}
	/* /modif FIX005*/
	.col1 p ,.col2 p , .col3 p , .col4 p  {padding:3px 2px;margin-top:5px;
	display: block;
	}
	.colJump, .colBr { break-before:always;}

	/* FIX002 DEBUT ajout */
	.col_2a,.col_2b 		{width:49%;float:left;padding:0 3px;}	.col_2a 		{border-right:1px dotted #eee;}
	.col_3a,.col_3b,.col_3c {width:33%;float:left;}	.col_3a,.col_3b {border-right:1px dotted #eee;} .col_3ab,.col_3bc {width:66%;float:left; border-right:1px dotted #eee;}

	.col_2a img,.col_2b img {width:100%;} 
/* FIX002 : FIN ajout */
/* /Colonnes */

/* -- GRILLE ------------------------ */
/* grilles d'articles FIX005 */

	/* grille texte 2 colonnes : */
	.grid2, .grid3 {width:95%;margin: 0 auto;}
	
	@media screen and (min-width: 1024px) { 
		.grid2 {display: grid; 
			grid-template-columns: repeat(2, 1fr); /* n+ n-1 colonnes d'une frame. les n-1 c'est pour les séparateurs */
			/* grid-auto-rows: minmax(300px, auto);	/* définir la hauteur mini de 100px et maxi automatique au plus grand */
			grid-column-gap: 3em;	grid-row-gap: 1em;
			z_grid-auto-columns: 300px 1px;
		}
	   
	}
		.grid3 {display: inline-grid;; 
			grid-template-columns: repeat(3, 1fr); 
			grid-column-gap: 10px;	grid-row-gap: 1em;
			/* 
			grid-auto-rows: minmax(100px, auto);	/* définir la hauteur mini de 100px et maxi automatique au plus grand */
		}
	.grid2 .cell,
	.grid3 .cell
		{background:transparent;font-size:1em;margin:0;}

/*
			-	 480px<= X < 960px 	: smartphone en paysage, tablette en portrait et petite tablette en paysage
			-	 960px<= X <=1280px : tablette en paysage, écran d'ordinateur de taille petite et moyenne
*/

/*
	.grid2z .cell:not(:last-child) {  border-right:solid #e0e0e0 1px;	}
	/* séparateur de colonnes */
/*
	.grid2z .cell.sep {	width:10px;		background:#f0e0e0;	}

	.grid2z:before {	content: " ";	display: table;	}
	.grid2z .cell{width:45%;display:inline-block;background:trensparent;font-size:1em;margin:0;}
	.cellz:after {  content: "";
	  background: #e0e0e0;
	  width: 1px;
	  display:block;
	  position: absolute;
	  top:0;
	  bottom: 0;
	  right: 0;
	  z_min-height: 70px;
	}
*/

	.grid5 {display: grid;grid-row-gap: 5em;}
	.grid5 article{padding:2em;;}
	/* grille jours de calendrier : */
	.grid7 {/* c'est aussi une cellule de calendGrid */
		display: grid;
		grid-template-columns: repeat(7, 1fr); /* 7 colonnes d'une frame */
		grid-auto-rows: minmax(100px, auto);	/* définir la hauteur mini de 100px et maxi automatique au plus grand */
		grid-column-gap: .1em;	grid-row-gap: .1em;
	}
	.dayCell{background:#6080ff;padding:.1em;color:black;}
/* /modif FIX005*/

/* -- IMAGES ------------------------ */
article p img {max-width:500px;} /* FIX001 changé le 12/11/2015, anc. 1024px et anc. 146px */

/* Pour masquer le corrigé des questions */
div.hidden {display:none;} /* FIX001 changé le 12/11/2015, anc. 1024px et anc. 146px */
/*
*/

/* -- TABLE ------------------------ */
table{border-spacing:0;margin:auto;}

/* -- POSITIONNEMENT VERTICAL PONCTUEL ------------------------ */
/* gestion du positionnement des images FIX004 18/11/2020 */
.adroite {float:right;margin:2px;padding:3px;}
.agauche {float:left;margin:2px;padding:3px;}
.aucentre {width:100%;margin:2px;padding:3px;text-align:center;} /* attention, le texte ne peut pas se mettre autour ... */
/* la taille des images est dépendante de la page où elles sont affichées */


/* -- ICONES et FLAGs ------------------------ */
/* 	Icones et flags d'indication d'exemple, de tp, etc. 
	Utiliser en insérant <div class="exemple_small"></div> devant le texte 
	La liste des fichiers imande utilisés
	icon2_cafe.png icon2_cours.png icon2_enreg.png icon2_exmpl.png icon2_exo.png icon2_ref.png */
	
	.exemple_small	{background-image:url(segami/icon2_exmpl.png);}
	.cours_small 	{background-image:url(segami/icon2_cours.png);}
	.cafe_small 		{background-image:url(segami/icon2_cafe.png);}
	.enreg_small 	{background-image:url(segami/icon2_enreg.png);}
	.exo_small 	{background-image:url(segami/icon2_exo.png);}
	.ref_small 		{background-image:url(segami/icon2_ref.png);}
	/* FIX2311-01 voir + loin : .warning 		{background-image:url(segami/warning.png);} */
	/* margin left= margin of article p + padding (10) left of col1 p (14)*/
	.exemple_small, .cours_small, .cafe_small, .enreg_small, .exo_small, .ref_small{background-size:cover;width:20px;height:20px;margin-right:3px;margin-left:14px;float:left;}
	/* margin left= margin of article p + padding (10) */
	
	/* la div.noter se comporte diféremment ... c'est une div avec des paragraphes (rien de changé) mais ici, on a un padding important et l'icône est une image de fond en haut à gauche. */
	.noter		 	{background-image:url(segami/icon2_note.png);}
	div.noter 		{background-size:40px 40px;background-repeat:no-repeat;background-position:5px 2px;padding-left:50px}

	.encart {float:right;margin:0;margin-left:8px;margin-right:-30px;padding:4px;width:35%;}/*.encart {float:right;margin:2px;padding:4px;width:27%;}*/
	/* .remarque {margin-left:5px;padding:5px;}*/
	.important {margin:5px 10px ;padding:5px;}
	.definition {margin:5px 10px ;padding:5px;}
	.clear {clear:both;}
/* /Icônes */

/* DIV EXEMPLE styles pour mettre la couleur sur les div d'exemples */
	div.exemple {width:90%;margin:auto;padding:3px;border:1px solid silver;border-radius:5px 5px 5px 5px; }
	.exemple 	{background:#f0fff0;color:#222;}
	
/* -- CODE ------------------------ */
/* DIV CODE : styles pour mettre la couleur sur les div de code */
	code, code *, .code , .code *		{font-family:codeFont, Courier New, arial;}
	
	code 	{color:#000;background:#aaa;} /* inline code */

	.code 	{width:95%;padding:5px;border-radius:5px 5px 5px 5px; font-size:.9em;}
	.code .vb	{color:#000;background:#cca;} /* inline code */
	
	code {margin:0 2px; padding:0 3px; font-size:.9em;}
	.code>div {margin:auto;margin-top:.8em; margin-bottom:.8em; padding:5px;border-radius:4px;border:1px solid black;}
	
/* si on n'utilise pas Geshi codeMano=repris de geshi mais arrangé à la mano. voir html_cours1.php */
	.codeMano 		{color:#000; }
	.codeMano ul	{list-style:none;padding:0;}
	.codeMano ul	{margin-left:20px; margin-top:5px; margin-bottom:5px;padding:0 5px;}
	.codeMano .reduit 	{font-size:8px;border:0;}
	.codeMano .masque 	{background:rgba(0,0,0,.05);border:0;}
	.codeMano .gris, .codeMano .gris *	{color:#777;font-style:italic;padding-top:0px; padding-bottom:0px;}
	
	/* encadrement des chapitres */
	.codeMano .boxed_red	{border:1px solid #f00;}
	.codeMano .boxed_blue	{border:1px solid #00f;}
	
	/* colorisation manuelle a virer petit à petit 
	html_cours1 : fait
	*/
	.code .comment {color:#080;font-style:italic;}
	.code .balise {color:#00f;}
	.code .attrib {color:#f00;}
	.code .chaine {color:#80f;font-weight:bold;}
	
	.codeBg .comment , .codeBg .gris	, .codeBg .gris *, .reduit, .reduit * {border:0;}
	.nn, .separateur {background-color:transparent;border:0;}
	
/* /si on n'utilise par Geshi */
	
/* -- MODELE RELATIONNEL ------------------------ */
/* DIV MR : styles pour mettre la couleur sur les div de schéma relationnel */
	.mr {background:#fffff8;padding:2px 4px;border:1px solid #ddd}
	div.mr {width:90%;margin:auto;padding:3px;}
	.mr label {}
	.mr ul	{list-style:none;padding:0;}
	.mr ul	{padding-left:20px; padding-top:5px; padding-bottom:5px;}
	.tableBox {border:2px solid black; padding:3px;vertical-align:top;}

/* taille des icônes dans les tables */
.ico {width:20px;}
	/* FIN styles pour mettre la couleur sur le code */
	
	
/*============================================================================*/
/* FIX2311-01 Ajout de styles pour harmoniser avec les autres parties du site */
/*============================================================================*/
/* Designs */
/* DESIGN divers --------------------------------------*/
.remarque{background:#afa;border:1px solid #595;}	.remarque::before{background-image:url(segami/remarque.png);}
.warning{background:#fc7;border:1px solid #595;}	.warning::before{background-image:url(segami/warning.png);}
.resultat{background:#7c7;border:1px solid #595;}	.resultat::before{background-image:url(segami/resultOK.png);}

.info{background:#ddf;border:1px solid #559;}	.info::before{background-image:url(segami/info.png);}
.def{background:#ffc;border:1px solid #559;}	.def::before{background-image:url(segami/def.png);}
.legende, .figure{font-style:italic;text-align:center;font-size:.8em;}

.warning::before,
.resultat::before
	{content:"";background-size:cover;width:40px;height:40px;margin-right:5px;margin-left:10px;float:left;}

.exo::before,.sample::before 	{content:"";background-size:cover;width:40px;height:40px;margin-right:10px;margin-left:5px;float:left;}
.exo::before 	{background-image:url(segami/icon2_exo.png);}
.sample::before	{background-image:url(segami/icon2_exmpl.png);}

.small {font-size:0.8em;}
.very_small {font-size:0.6em;}

/* Positionnement */
/* ----------------------------------------------*/
/* images et encarts */
/* ----------------------------------------------*/
.remarque, .warning, .info, .def {padding:3px 5px;margin:10px auto;}
img {width:100%;max-width:500px;margin:3px 0;}
article>img, article>.a_droite, .a_gauche,.au_centre {max-width:500px;width:35%;}
.a_droite {float:right;margin-left:5px;padding:0 3px;}
.a_gauche {float:left;margin-right:5px;}
.au_centre {width:90%;max-width:840px;margin:auto;display:flex;text-align:center;}


/* ----------------------------------------------*/
/* Codes, source et texte expandables */
/* ----------------------------------------------*/
.code pre {padding:5px 20px;}

.codeContainer {margin:5px; padding:5px; background: rgba(0,0,0,.05);}

.zcodeAlt, .expAlt {background:#ddc; display:block; } /* le texte affiché d'origine */
.expandable .codeAlt			{display:none; 	}
.expandable.closed .codeAlt	{display:block; }
.expandable .expAlt			{display:none; 	}
.expandable.closed .expAlt	{display:block; }
zz.expandable.closed .expAlt	{display:block; font-size:0.9em;font-style:italic; margin-left:20px;}

/*============================================================================*/
	
/* http://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html */
/* les "flat icons" viennent de là http://www.pixeden.com/media-icons/flat-design-icons-set-vol2 designed by  Vivien Bocquelet https://dribbble.com/shots/1552114-Flat-Design-free-icon-set */