/* ********************** partie generale *************/
body {
	background-color:#784180;
	width:800px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:18;
}
h1 {
	font-size:22;
}
ul {
	padding-top: 10px;
  	padding-right: 180px;
  	padding-bottom: 10px;
  	padding-left: 80px;
}
li {
	text-align: justify;
}
p {
	text-align: justify;
}
.adresse {
	text-size: 8px;
}
.denis_bureau {
	padding-top: 0px;
  	padding-right: 0px;
  	padding-bottom: 10px;
  	padding-left: 20px;
        //border: 5px solid #78417f;
        //border: 5 5 5 5 ;
        border-radius: 2em 1em 3em;

}

/* ********************** partie entete *************/
.entete {
	width:800px;
	//background-color:red;
	color: black;
	font-size:18;
	text-align:center;
	vertical-align: middle;
	float:left;
}
.entete_gauche {
	//background-color:blue;
	width:390px;
	float:left;
}

.entete_nom {
	//width:400px;
	height:80px;
	background-color:white;
	color:#784180;
	font-size:32;
	text-align:center;
	vertical-align: middle;

/*
	margin-top: 10px;
  	margin-bottom: 10px;
  	margin-right: 10px;
  	margin-left: 10px;

	padding-top: 1px;
  	padding-right: 1px;
  	padding-bottom: 1px;
  	padding-left: 1px;
*/
	padding-top: 5px;
	
}
.entete_bandeau {
	//background-image: url("/images/bandeau_entete.png");
	background-image: url("/images/bandeau_blanc.png");
	background-repeat: repeat-y;
	
	height:50px;
}
.entete_droit {
	//background-color:green;
	width:390px;
	float:left;
}
p.nom {
	color:blue;
	text-align:center;
}

/* ********************** partie corps *************/
.corps {
	//background-color:white;
	background-image: url("/images/bandeau_blanc_800_2.png");
	background-repeat: repeat-y;
	color:#784180;
	//float:inherit;
	float:left;
	width:100%;
	//width:800px;
	margin-top: 10px;
  	margin-bottom: 10px;
  	margin-right: 10px;
  	margin-left: 10px;
	padding-top: 10px;
  	padding-right: 80px;
  	padding-bottom: 10px;
  	padding-left: 80px;
}
.corps_contenu {
	background-color:white;
	//float:inherit;
	//float:initial;
}
/* ********************** partie bas *************/
.bas {
	//background-color:#af8eb4;
	float:left;
	width:100%;
	color:white;
	font-size:10;
	text-align:center;
}

.paragraphe {
	border: 0px solid silver;
	padding: 1em;
	margin: 1em;
}

.avatar {
	float:left;
	shape-outside: circle();
	border-radius:50%;
	margin: 1em 2em 1em 1em;
	border: 5px solid #784180;;
	width:150px;
}

.avatar_inp {
        float:left;
        shape-outside: circle();
        //border-radius:50%;
        margin: 1em 2em 1em 1em;
        border: 0px solid #784180;;
        width:150px;
}


.avatar_ulsid {
	float:left;
	background-color:blue;
        border-radius: 2em 1em 3em;
	//shape-outside: circle();
	//border-radius:50%;
	margin: 1em 2em 1em 1em;
	border: 5px solid #784180;;
	padding: 25px solid #784180;;
	width:150px;
}

.paragraphe_texte {
	text-align:justify;
	//background-color:red;
	border: 10 10 10 10;
	margin: 0 0em 1em 10;
	padding: 0em 6em 1em 3em;
}

.voyage_paragraphe {
	background: url("images/drapeau_allemagne.png") center bottom no-repeat,
	url("images/drapeau_canada.png") center top no-repeat ,
	url("images/drapeau_portugal.png") right bottom no-repeat ,
	url("images/avion.png") left top no-repeat ,
	url("images/drapeau_italie.png") left bottom no-repeat ,
	url("images/drapeau_gb.png") top right no-repeat ;
	padding: 100 100 100 100;
	background-color:yellow;
	height:50px;
	width:350px;
}

.colonne {
	width: 600px;
	text-size:12px;
	column-width:100px;
	column-gap: 1.5em;
	column-rule:solid;
	text-align:justify;
}

.image_ombre{
	width:400px;
	border: 60px solid rgba(0,0,0,1);
	box-shadow:
		0 6px 12px rgba(0,0,0,.23),
		0 10px 40px rgba(0,0,0,.19);
}
.image_flou_15{
	width:100px;
	filter: blur(5px);
}
.image_flou_5{
	width:100px;
	filter: blur(5px);
}
.image_flou_3{
	width:100px;
	filter: blur(3px);
}
.image_flou_0{
	width:100px;
	filter: blur(0px);
}
.image_luminosite_100{ width:100px; filter: brightness(100%); }
.image_luminosite_70{ width:100px; filter: brightness(70%); }
.image_luminosite_50{ width:100px; filter: brightness(50%); }
.image_luminosite_0{ width:100px; filter: brightness(20%); }

.image_noir_et_blanc_0{ width:100px; filter: grayscale(100%); }

.image_contrast_0{ width:100px; filter: constrast(0%); }
.image_contrast_30{ width:100px; filter: constrast(30%); }
.image_contrast_70{ width:100px; filter: grayscale(70%); }
.image_contrast_100{ width:100px; filter: grayscale(100%); }

.image_hue_rotate_0{ width:100px; filter: hue-rotate(0deg); }
.image_hue_rotate_30{ width:100px; filter: hue-rotate(30deg); }
.image_hue_rotate_70{ width:100px; filter: hue-rotate(70deg); }
.image_hue_rotate_100{ width:100px; filter: hue-rotate(100deg); }

.image_sepia_50{ width:100px; filter: sepia(50%); }

.image_saturate_50{ width:100px; filter: saturate(50%); }

th {
	background-color:#784180;
	color:white;
}
table tr {
	background-color:white;
	color:blue;
}
table tr:nth-child(even) { 
	/* even = pair odd=impair */
	//background-color:blue;
	background-color:#af8eb4;
	color:white;
} 

.lecture_musso {
	float:left;
}

table.levy tr.levy {
	background-color:white;
	color:blue;
}
table.levy tr.levy:nth-child(3n+1) { 
	/* even = pair odd=impair */
	background-color:blue;
	color:white;
} 

ul {
	background-color:green;
}

$max:10;
@for $i from 1 through $max {
	li:first-child:nth-last-child(#{$i}) {
		width: (100% / $i);
		background-color:red;
		color:yellow;
	}
}
/*********************************************
partie grid
*************************************************/

/*
// ATTENTION // pose des probléme, il faut mettre "slash etoile" et "etoile slash" sinon css plante !!!
// partie grille
// () = nom donné à la zone
// fr => unité restante disponible
*/
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

/*********************************************
fin partie grid
*************************************************/