balsamine.2013-2014
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

balsa2014-sup.html
text/html

Download raw (72.5 KB)

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Balsamine 2013-2014</title>
    
  <link rel="stylesheet" type="text/css" href=" http://meyerweb.com/eric/tools/css/reset/reset.css" />
  
 
    <style type="text/less">
/*
-  V A R I A B L E S  ---------------------------------------------------------------------------------------------
*/
 
@font-size-100: 10pt;
@line-height-100: 13pt;
 
@font-size-98: 14pt;
@line-height-98: 17pt;
 
@font-size-97: 13pt;
@line-height-97: 15pt;
 
@font-size-0: 12pt;
@line-height-0: 14pt;
 
@font-size-1: 16pt;
@line-height-1: 18pt;
 
@font-size-12: 18pt;
@line-height-12: 20pt;
 
@font-size-2: 27pt;
@line-height-2: 27pt;
 
@font-size-3: 30pt;
@line-height-3: 34pt;
 
@font-size-4: 40pt;
@line-height-4: 44pt;
 
@border: 2px solid @color-C;
@border-vert: 2px solid @color-N;
 
/*
-  C O U L E U R S  ---------------------------------------------------------------------------------------------
*/
 
@color-link: green; 
@color-C: rgb(255, 0, 82);  // magenta/rouge fluo
@color-N: #00aa5a;   // green U vert #00aa5a
@color-W: white;

//@color-C: black;
//@color-N: white;

img.preview {
    // display: none;
    border: 0px;
    z-index: 9;
}
img.noir {
     display: none;
    z-index: 8;
}
img.vert {
    display: none;
}
img.rose {
    display: none;
}


 
@color-0: mix(@color-N, @color-C, 0%);
@color-10: mix(@color-N, @color-C, 10%);
@color-20: mix(@color-N, @color-C, 20%);
@color-30: mix(@color-N, @color-C, 30%);
@color-40: mix(@color-N, @color-C, 40%);
@color-50: mix(@color-N, @color-C, 50%);
@color-60: mix(@color-N, @color-C, 60%);
@color-70: mix(@color-N, @color-C, 70%);
@color-80: mix(@color-N, @color-C, 80%);
@color-90: mix(@color-N, @color-C, 90%);
@color-100: mix(@color-N, @color-C, 100%);
 
@colorG-0: mix(@color-N, @color-W, 0%);
@colorG-10: mix(@color-N, @color-W, 10%);
@colorG-20: mix(@color-N, @color-W, 20%);
@colorG-30: mix(@color-N, @color-W, 30%);
@colorG-40: mix(@color-N, @color-W, 40%);
@colorG-50: mix(@color-N, @color-W, 50%);
@colorG-60: mix(@color-N, @color-W, 60%);
@colorG-70: mix(@color-N, @color-W, 70%);
@colorG-80: mix(@color-N, @color-W, 80%);
@colorG-90: mix(@color-N, @color-W, 90%);
@colorG-100: mix(@color-N, @color-W, 100%);
 
@colorC-0: mix(@color-C, @color-W, 0%);
@colorC-10: mix(@color-C, @color-W, 10%);
@colorC-20: mix(@color-C, @color-W, 20%);
@colorC-30: mix(@color-C, @color-W, 30%);
@colorC-40: mix(@color-C, @color-W, 40%);
@colorC-50: mix(@color-C, @color-W, 50%);
@colorC-60: mix(@color-C, @color-W, 60%);
@colorC-70: mix(@color-C, @color-W, 70%);
@colorC-80: mix(@color-C, @color-W, 80%);
@colorC-90: mix(@color-C, @color-W, 90%);
@colorC-100: mix(@color-C, @color-W, 100%);
 
 
div#nuancier {
    width: 100%; 
    
    div {
        float: left;
        height: 50px;
        width: 8%;
        margin-right: 5px;
	    margin-top: 5px;
    }
}
 
div#colorC-0 { background-color: @colorC-0;}
div#colorC-10 { background-color: @colorC-10;}
div#colorC-20 { background-color: @colorC-20;}
div#colorC-30 { background-color: @colorC-30;}
div#colorC-40 { background-color: @colorC-40;}
div#colorC-50 { background-color: @colorC-50;}
div#colorC-60 { background-color: @colorC-60;}
div#colorC-70 { background-color: @colorC-70;}
div#colorC-80 { background-color: @colorC-80;}
div#colorC-90 { background-color: @colorC-90;}
div#colorC-100 { background-color: @colorC-100;}
 
div#color-0 { background-color: @color-0;}
div#color-10 { background-color: @color-10;}
div#color-20 { background-color: @color-20;}
div#color-30 { background-color: @color-30;}
div#color-40 { background-color: @color-40;}
div#color-50 { background-color: @color-50;}
div#color-60 { background-color: @color-60;}
div#color-70 { background-color: @color-70;}
div#color-80 { background-color: @color-80;}
div#color-90 { background-color: @color-90;}
div#color-100 { background-color: @color-100;}
 
div#colorG-0 { background-color: @colorG-0;}
div#colorG-10 { background-color: @colorG-10;}
div#colorG-20 { background-color: @colorG-20;}
div#colorG-30 { background-color: @colorG-30;}
div#colorG-40 { background-color: @colorG-40;}
div#colorG-50 { background-color: @colorG-50;}
div#colorG-60 { background-color: @colorG-60;}
div#colorG-70 { background-color: @colorG-70;}
div#colorG-80 { background-color: @colorG-80;}
div#colorG-90 { background-color: @colorG-90;}
div#colorG-100 { background-color: @colorG-100;}
 
 


 
/*
-  P R I N T  ------------------------------------------------------------
*/
 
@page {
    //size:14,8cm 20cm; // format coupé : soit 559 x 756 px
    //size:16,8cm 22cm;  // format programme avec cropmarks => 6.60 inches * 8.70 inches ou 635 x 831,5 px
    
	//size:13,8cm 19cm; // format supplement coupé 
    size:15,8cm 21cm;  // format supplément avec cropmarks => 6.22 inches * 8.27 inches ou 597 x 793,7 px
    margin: 0;

    //margin-left: 0.5cm;
    //margin-right: 0cm;
    //margin-top: 0.5cm;
    //margin-bottom: 0.5cm;
    //margin: 0 1cm;
    border: 1px solid @color-N;
    orphans:4; widows:2; /* ça n'a pas l'air de marcher ce truc ? */ 
}
div#virtual {
    position: absolute;
    z-index: 1000;
    width: 100%; 
}
div.fakepage {
    //position: absolute; 
    position: relative;
    height: 1164px;
    width: 880px; 
    z-index: -10;
}
 
div.crop-tl,
div.crop-tr,
div.crop-br,
div.crop-bl {
    height: 1cm;
    width: 1cm;
    position: absolute;
    box-sizing: border-box;
}
 
div.crop-tl {
    left: 0;
    top: 0;
}
div.crop-tr {
    right: 0cm;
    top: 0cm;
}
div.crop-br {
    right: 0;
    bottom: 0;
}
div.crop-bl {
    left: 0;
    bottom: 0;
}
div.crop-top,
div.crop-right,
div.crop-bottom,
div.crop-left, {
    width: 0.5cm;
    height: 0.5cm;
    position: absolute;
    box-sizing: border-box;
}
div.crop-top {
    border-top: 1px solid black;
}
div.crop-right {
    border-right: 1px solid black;
}
div.crop-bottom {
    border-bottom: 1px solid black;
}
div.crop-left {
    border-left: 1px solid black;
}
 
div.folio {
    position: absolute;
    bottom: 1.9cm;
    font-family: Ume P Gothic Balsa;
    width: 100%;
    text-align: center;
    z-index: 1000;
    p { color: @color-N; font-size: 10pt;}
    
    .supplement{
            p { color: @color-N; font-size: 10pt;}

        }
}


 
/*
-  G E N E R A L   ------------------------------------------------------------
*/
 
* {
	color: @color-N;
    -webkit-print-color-adjust: exact;  /* Allows printing of background colors */
}
html {
    width: 870.55px;
    //width: 16.5cm;
}
body {
    width: 100%;
    font-family: Ume P Mincho;
    font-size : @font-size-0;
    line-height: @line-height-0;
    color: @color-C;
    
     section.supplement * {
             color: @color-N ;
             outline-color: @color-N ;
		
         }    

}
 
@media screen {
    ul#toc { display: block;}
}
@media print {
    ul#toc { display: none;}
}
 
ul#toc {
    position: fixed;
    right: 1cm;
    bottom: 1cm;
    height: auto; 
    width: auto;
}
 
/*
-  B L O C K S   -----------------------------------------
*/
section#body {
    margin-left: 3cm;
    margin-right: 1.5cm;
}

article {
    width: 100%;
    //page-break-before: always;  
    //margin: 0 0.25cm;
    margin-top: 1cm;
    background-color: white;
    clear: both; 
    position: relative;

    div {
	    float: left;
	    /*box-sizing: border-box;
	    outline-offset: -10px;*/
	    }

 

    div.texte {
	    /*background-color: mix(@color-C, @color-N, 50%);*/
	    height: auto;
	    box-sizing: border-box;
	    padding: 20px;
	    outline-offset: -10px;
	    outline: @border;
	    color: @color-C;
	    font-size:@font-size-98;
	    line-height: @line-height-98;
	    page-break-inside: avoid;
	
		.supplement{
		    color: @color-N;
		outline:@border-vert;
		}
	    }



	div.resume {
		outline: none;
		color: @color-N;
		}
	
    div.image {
	    /*background-color: mix(@color-C, @color-C, 33%);*/
	    border: @border;
	    overflow: hidden;
	    box-sizing: border-box;
	    margin-right: 5px;
	    margin-bottom: 5px;
	    }

	 div.atelier {
	    height: auto;
	    box-sizing: border-box;
	    padding: 20px;
	    outline-offset: -10px;
	    //outline: @border-vert;
	    color: @color-N;
	    font-size:@font-size-0;
	    line-height: @line-height-0;
	    page-break-inside: avoid;
	}
	
	 div.pratique {
	    height: auto;
	    box-sizing: border-box;
	    padding: 20px;
	    outline-offset: -10px;
	    outline: @border-vert;
	    color: @color-N;
	    font-size:@font-size-98;
	    line-height: @line-height-98;
	    page-break-inside: avoid;
		.supplement{
		    background-color: white;
		}
	
	}

 }
	

	
    div.imagesimple {
    outline: 0px solid @color-N;
    overflow: hidden;
    box-sizing: border-box;
    }

 

    div.bible {
    padding: 10px;
    //outline: 3px solid @color-N;
    box-sizing: border-box;
    outline-offset: -10px;
    height: auto;
    width:15%;
    font-size: @font-size-0;
    line-height: @line-height-0;
    }

 

    div.artiste {
    outline: none !important;

    }


 
div.image-cmjn {
    position: relative;
    width: 100%;
    overflow: hidden;
    outline-color: @color-C;
    outline-style: solid;
    outline-width: 0px;
    z-index:90;  
		.supplement{
		    outline-color: @color-N;
		}

     
    img {
	    position: absolute;
	    left: 0;
	    //opacity: 0.9;
    }

     

    p {
	    position: relative;
	    z-index: 10;
    }

}
 
div.vignette {
    height: 225px;
    outline-width: 15px;
    margin: 25px;
    margin-left: 0;
    margin-bottom: 5px;
    z-index: 100;
 

    img {

    height: 100%;

    }

}
 
div.transition {
    position: relative;
    width: 886px;
    margin-left: -93px;
    overflow: hidden;
 
    img {
        position: absolute;
    }
}
 
div.full {
    position: relative;
    overflow: hidden;
    height: auto;
    
    img {
        position: absolute;
    }
}
 
div#flux-container div.flux  {
    -webkit-flow-from: article-flow;
    //outline:1px solid blue;
    height:30px;
    float:left;

}
article#artcolophon {
    -webkit-flow-into: article-flow;
    
    dd {
        font-family: Ume P Mincho;
        font-size: 16px;
        border-bottom: none;
        }
}
  
.demi-tour {
     -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}
 
.turn-right {
     -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
 
.turn-left{
     -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
}

.turn-skiev-4{
     -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
}

.turn-skiev-2{
     -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
}
 
 
 
.shape-hexagone {
    -webkit-shape-inside: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    width: 200px;
    height: 200px;
    text-align: justify;
}
 
div.page-break {
    page-break-after: always;
    height: 1em;
    width: 100%;
    position: relative;
    float: none;
}
 
div.clip {
    -webkit-mask-image: url('http://www.ludi.be/logo-boutt.svg');
    -webkit-mask-clip: padding;
}
 
div.cach{
    position: relative;
    z-index: 100px;
    }
    
div.cuted{
    position: relative;
        }
        
table {
	border-collapse: separate;
	border-spacing: 10px;
	table-layout: auto;
	width: 100%;
	
	
	th {
		font-family: Ume P Gothic Shadow;
		text-transform: uppercase;
		vertical-align: bottom;
		padding: 10px;
		border: 2px solid @color-N;
	}
	td {
		padding: 10px;
		vertical-align: top;
	}
	th:first-child, td:first-child {
		//width: 90px;
		font-family: Ume P Gothic Shadow;
		text-transform: uppercase;
		
		div {
			width: 10px;
			text-align: center;
			margin-right: 10px;
		}
		
	}
	
	
	
	th.vide, td.vide {
		padding: 0;
		border: none;
		position: relative;
		overflow: hidden;
		
		img {
			position: absolute;
			width: 100%;
		}
	}
	
}
 
/*
-  P A R A G R A P H E S  &  C H A R A C T E R S ----------------------------------------------
*/
 
sup {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: 0.3em;
}
 
h1, h2, h3, h4, h5, h6 {

    font-weight: normal;     /* Enlève le bold, car sinon il est forcé par le navigateur */

}
 
h1 {
    font-family: Ume P Gothic Shadow;
    text-transform : uppercase;
    font-size: @font-size-4;
    line-height: @line-height-4;
    color:@color-C;
    text-align: center;
    background: white !important;
    z-index: 100;
	
	.supplement{
		color:@color-N;
		}     


}
 
h2 {

    font-family: Ume Mincho Balsa;
    text-transform: uppercase;
    font-size: @font-size-0;
    line-heisupght : @line-height-0;
    color:@color-C;
    text-align: center;

	.supplement{
	   color:@color-N;
	}   
	
}
 
h3 {
    font-size: @font-size-97;
    line-height : @line-height-97;
    display: inline-block;
    text-transform:uppercase;

}


h5{
    font-family: Ume P Gothic Shadow;
    text-transform : uppercase;
    font-size: @font-size-3;
    line-height: @line-height-3;
    color:@color-N;
    text-align: center;
    background: white !important;
    z-index: 100;
}

.partsup {
      font-family: Ume P Gothic Balsa;
    text-transform : uppercase;
    font-size: @font-size-2;
    line-height: @line-height-2;
    color:@color-N;
    float:none;
    text-align:center; 
    margin: auto; 
    width:70%;
    margin-top: 50px;
    z-index: 100;
    }
    

 
p {
    width: 100%;
    /*page-break-inside: avoid;*/   /* ça évite que les paragraphes soient coupés par la fin de page ou de bloc*/
}
 
blockquote {
    font-family: Ume Mincho Balsa;
    font-size: @font-size-12;
    line-height : @line-height-12;
    outline: none;
    -webkit-region-break-before: always;
    text-align:center;
    text-transform:uppercase;
    }

.blockquote {
    color: @color-N;
    page-break-inside: avoid;
    padding: 20px 10px;
}

.nl {
    color: @color-C;
	.supplement{
	   color:@color-N;
	}   
}

ul {
    //.shape-hexagone;
    li {
        list-style-type: none;
    }
}
 
dl {
    font-family:Ume Mincho Balsa;
    font-size: 10pt;
    line-height: 13pt;
    text-align: left;
}
  
dt {
    font-family: Ume P Gothic Balsa;
    font-size: 8pt;
    text-transform: uppercase;
    color: inherit;
    letter-spacing: 1px;
    border: solid thin @color-N;
    border-top: none;
    border-right: none;
    display: inline;
    padding: 3px 3px 1px 3px;
    margin: 0 -5px 0 0;
font-weight: normal !important;
	 
}

		
		

dd {

    color: inherit;
    line-height: 13px;
    margin-bottom: 1px;
    border: solid thin @color-N;
    border-top: none;
    border-left: none;
    display: inline;
    padding: 0px 3px 1px 3px;
    margin: 0 2px 0 0;

}
 
dd + span { 
    font-size: 11pt;
    line-height: 0;
    vertical-align: -6px;
    margin: 0 -6.3px 0 -1.2px;
}

dl span:last-child {
    display: none;
}
 
dd + dt {
    margin-top: 5px;
}

 td{
      border: solid 2px @color-N;
     }
     
th{
      text-align:left;
     }
 
div.titre{
    padding: 10px;
    outline:none !important;
    border-color: mix(@color-C, @color-C, 20%);
    border-style: solid;
    box-sizing: border-box;
    margin: 0 0 0 -3px;
  background: white !important;
    z-index: 100;
    position:relative;
    page-break-inside: avoid;
    
	.supplement{
	   border-color:@color-N;
	}   
}

div.titre:first-child {

    clear: left;

}
 
div.type {
    padding: 5px;
}
 
div.artiste {
    padding-left: 5px;
}
 
div.date {
     font-family: Ume P Gothic Shadow;
    text-transform : uppercase;
    font-size: @font-size-0;
    line-height : @line-height-0;
    text-align: center;
    outline: none;
    //-webkit-transform: rotate(-15deg);
    color: @color-C;

	.supplement{
	  color: @color-N;
	}
}
div.horaire {
    font-family: Ume P Gothic Shadow;
     font-size: @font-size-0;
    line-height : @line-height-0;
    text-transform: uppercase;
    text-align: center;
    color: @color-C;
    
	.supplement{
	  color: @color-N;
	}
    
}
 
div.relax{
    font-family: Ume P Gothic Balsa;
    margin-top: 7px;
    margin-bottom: 7px;
    
    }
 
div.production {
    font-family: Ume P Gothic Balsa;
    font-size: @font-size-100;
    line-height : @line-height-100;
    page-break-inside: avoid;

     padding: 10px;

    box-sizing: border-box;

}
 
div.bible {
    page-break-inside: avoid;
}
 
em {
    font-family: Ume P Gothic Balsa;
}
 
b {
    color: @color-C;
    
	.supplement{
	  color: @color-N;
	}
}
 
.under {
    text-transform : uppercase;
     text-decoration: underline;
    color: @color-C;
    font-family: Ume P Gothic Balsa;
	.supplement{
	  color: @color-N;
	}
}
    
    
.numbers{
    font-family: Ume P Gothic Balsa;
    font-size: @font-size-1;
    line-height: 25px;
    color: @color-N;
    text-transform: uppercase;
    /*outline: 2px solid @color-N;*/
    padding: 8px 10px 0px 5px;
    box-sizing: border-box;
    outline-offset: -5px;
    background-image: url('../materials/extract/aspiration.gif');
    background-position:-100px -50px;
    
	.supplement{
	  color: @color-N;
	}

}

.fusee-numbers {
    font-family: Ume P Gothic Balsa;
    font-size: @font-size-1;
    line-height: 25px;
    color: @color-N;
    text-transform: uppercase;
    outline: 2px solid @color-N;
    padding: 8px 10px 0px 5px;
    box-sizing: border-box;
    outline-offset: -5px;
    background-image: url('../materials/extract/aspiration.gif');
    background-position:-100px -50px;
	.supplement{
	  color: @color-N;
	}
}

article#infos-pratiques .numbers {
    padding: 20px;
    text-transform: none;
    }
 
div.if {
    font-family: Ume P Gothic Balsa;
    font-weight: bold;
    font-size: @font-size-1;
    line-height: @line-height-1;
    outline: none !important;
    box-sizing: border-box;
    padding: 0 5px;
    text-transform: uppercase;
    text-align: left;
    margin-top: 10px;
 

    p {
    color: @color-C;
		.supplement{
		  color: @color-N;
		}
    }

}
 
span.lettrine {
    text-transform: uppercase;
    letter-spacing: 1px;
}
 
.occas{
     color: @color-N;
    }
 
div.out{
    font-family: Ume P Gothic Vertical;
    line-height: @line-height-0;
    font-size: 11pt;
    box-sizing: border-box;
    border-top:@border-vert;
   border-left:@border-vert;
   color: @color-N;
    /*font-weight: bold; // forcé par le navigateur, mais nécessaire si texte en défonce*/

    padding:  12px 0 0 15px;

    margin-top: 9px;

    border-color: @color-N;

}

div#pass-varia p, div#pass-varia sup {
    color: @color-C;
		.supplement{
		  color: @color-N;
		}
    }
 
 div#making-of p+p {
     text-indent: 1.5em;
}
 
 
div.border {
    border: @border;
}
 
.centrer {   
    margin-left: auto;   
    margin-right: auto;   
    width: 80%; /* largeur obligatoire pour être centré */
}
 
.item {
  width: 50px;
  margin: 10px;
  float: left;
}
 
 div.fiche{
	    height: auto;
	    box-sizing: border-box;
	    padding: 20px;
	    //outline-offset: -10px;
	margin : 10px;
	    outline: @border-vert;
	    color: @color-N;
	    page-break-inside: avoid;
	font-family: Ume P Gothic Vertical;
	border:none;
	font-size:@font-size-97;
	line-height: @line-height-97;
	
	// SLANTASTIC
	//border-bottom: 15px solid @color-N;
	//border-left: 15px solid transparent;
     }

.shasha{
	box-shadow: 25px 10px 0px @color-N;
    }
 
		
		.intitule{
			font-size:@font-size-0;
			font-family:Ume Mincho Balsa;
			border: none;
			text-transform:uppercase;
			}
 
 
article.bordure-bariolee {
    background-image: url("../materials/extract-G/blow1.gif");      // à overrider pour chaque bariole
    background-position: -45px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 30px 55px 30px 120px;
    width: 850px;
    margin-left: -100px;
    height: 1164px;
        margin-top: 0;
    
    h1, h2, p, blockquote {
        box-sizing: border-box;
        padding: 15px;
        background-color: white;
    }
}

article#cover, article#back-cover {
        background-image: url("cover/supp_cover-print-page003-G.png");
        background-size: 200%;
    
}


    
article#edito1 {
    background-image: url("../materials/extract-G/blow1.gif");
    background-position-x: -65px;
    background-position-y: -45px;
    padding-top: 100px;
    background-size: 262%;
}
article#edito2 {
    background-image: url("../materials/extract-G/drape.gif");      
    padding-top: 100px;
}
article#mediation-artistique {
    background-image: url("../materials/extract-G/circles-and-lines-170.gif");      
    background-size: 110%;
    background-position-y: -177px;
}
article#infos-pratiques {
    background-image: url("../materials/extract-G/cloud.gif");      
    background-position-y: 0px;
}

div.extra{
	    height: auto;
	    box-sizing: border-box;
	    padding: 20px;
	    outline-offset: -10px;
	    page-break-inside: avoid;
	font-family: Ume P Gothic Balsa;
	border:none;
	font-size:@font-size-1;
	line-height: @line-height-1;
    }


 
/*
- C O M M I T S ----------------------------------------------
*/
 
 div#commit-container div {
     -webkit-flow-from: CommitFlow;
     width: 25%;
     height: 1000px;
     }
 
.commit-list {
    width: 100%;
    //-webkit-column-count: 4;
    -webkit-flow-into: CommitFlow;
    //margin-left: 77px;
    
    div {
        float: left;
        }
}
.ellipse {
      clear: both;
      width: 5px;
      margin: auto;
      margin-left: 50px;
      border-left: 1px solid black;
}
.commit p {
      margin-bottom: 0;
}
.commit-author {
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 8px;
      border: solid 1px;
      padding: 2px;
      margin-bottom: -1px;
      margin-right: -1px;
      position: relative;
}
.commit-author-said {
      text-transform: none;
      letter-spacing: 0.05em;
      font-size: 9px;
      border: solid 1px;
      padding: 2px;
      margin-bottom: -1px;
      margin-right: -1px;
      position: relative;
      top: 0px;
      margin-left: 0px;
}
.commit-spacer {
              display: none;
      width: 19px;
      height: 12px;
      float: left;
      border-top: 1px solid black;
      position: relative;
}
.commit-message {
      float: left;
      text-indent: -18px;
      font-size: 10px;
      line-height: 10.5px;
      border: solid 1px;
      display: inline-block;
      padding: 2px 2px 2px 22px;
      width: 120px;
      margin-left: 15px;
      margin-top: -4px;
      background-color: white;
      background-image:url('../materials/extract/aspiration.gif');
      background-position: -470px -257px;
      background-size: 400px 300px;
}

.commit-message1 {
      float: left;
      text-indent: -18px;
      font-size: 10px;
      line-height: 10.5px;
      border: solid 1px;
      display: inline-block;
      padding: 2px 2px 2px 22px;
      width: 120px;
      margin-left: 15px;
      margin-top: -4px;
      background-color: white;
      background-image:url('../materials/extract/cloud-light.gif');
      background-position: 465px -865px;
background-size: 205px 211px;
}

.commit-message2 {
      float: left;
      text-indent: -18px;
      font-size: 10px;
      line-height: 10.5px;
      border: solid 1px;
      display: inline-block;
      padding: 2px 2px 2px 22px;
      width: 120px;
      margin-left: 15px;
      margin-top: -4px;
      background-color: white;
      background-image:url('../materials/extract/cloud-light.gif');
      background-position: 165px -265px;
background-size: 205px 211px;
}

.commit-date {
          display: none;
      float: left;
      font-size: 8px;
      margin-left: 18px;
      margin-top: -1px;
      padding: 0 2px;
      padding-right: 4px;
      border: solid 1px;
      padding: 1px 3px 1px 3px;
      margin-bottom: -1px;
      margin-right: -1px;
      background-color: @colorC-40;
      border-top-color: @colorC-40;
      margin-top: -2px;
      
	.supplement{
	border-top-color: @color-N;
	background-color: none;
	
	}
}
.commit-source {
      font-size: 8px;
      margin-left: 18px;
}

/*
-  M A S O N ----------------------------------------------
*/
 
 .itemmason {
    font-family: Ume P Gothic Balsa;
    font-size: 10px;
    line-height: 12px;
border; solid 1px;
    padding: 0 0 0 0;
    text-align: center;
    margin: -1px 0px 10px 0px;
 }
 

</style>
</head>

<body>
    <div id="virtual">
        <div id="fakepage" class="fakepage" style="display: none;">
            <img src="../materials/cale-page-sup.png" />
            <div class="crop-tl">
                <div class="crop-right" style="top: 0; right: 0;"></div>
                <div class="crop-bottom" style="bottom: 0cm; left: 0;"></div>
            </div>
            <div class="crop-tr">
                <div class="crop-left" style="top: 0; left: 0;"></div>
                <div class="crop-bottom" style="bottom: 0; right: 0;"></div>
            </div>
            <div class="crop-br">
                <div class="crop-left" style="left: 0; bottom: 0;"></div>
                <div class="crop-top" style="right: 0cm; top: 0;"></div>
            </div>
            <div class="crop-bl">
                <div class="crop-right" style="bottom: 0cm; right: 0;"></div>
                <div class="crop-top" style="left: 0cm; top: 0"></div>
            </div>
            <div class="folio">
            </div>
        </div>
    </div>

    <ul id="toc"></ul>

   

<section id="body" class="supplement export">




<article id="edito1" class="bordure-bariolee">
    <p class="edito">
    «&thinsp;Balsamiquement vôtre&thinsp;» dans le sens où nous avons la volonté d’agir comme un baume sur certaines difficultés que l’on peut éprouver parfois dans nos vies respectives. Dégageons le sens caché, sortons la tête de l’eau pour voir moins trouble. Peut-on vivre sans ces «&thinsp;je ne sais quoi&thinsp;», sans musique, sans joie et sans amour&thinsp;? L’art peut être ce magnétisme abstrait qui nous tire vers le haut, qui nous tire de notre lit le matin, qui nous étire, nous rend plus grand, plus ouvert, plus à l’écoute de soi, des autres. 
    </p>
    <p>
    Ce petit guide est concocté à votre intention bienveillante et est censé nous faire passer une année agréable et artistiquement jouissive. Il y a un brin d’Épicure sinon rien, Le plaisir&thinsp;! Venir au théâtre, découvrir de nouvelles perspectives. Témérité, diront certains, audace inconsciente, objecteront d’autres, ou encore, pur émerveillement. Traiter le contemporain c’est aborder nos vies, notre temps et cela nous est donc naturellement adressé et accessible. Et s’il suffisait de faire confiance à sa sensibilité et à son intuition&thinsp;? 
    </p>
    <p>
    Il ne reste plus qu’à vous rencontrer, qu’à user ce programme, ce projet qui nous rappelle que les aventures artistiques sont là, à l’image de nos plus belles aventures humaines, pour nous pousser au dépassement plus qu’à la résignation. 
    </p>
    <p>
    <em>Monica Gomes & Fabien Dehasseler</em><br/>
    Direction artistique
    </p>
</article>



<article id="edito2" class="bordure-bariolee">
    <p>
    Comment donner accès au théâtre d’aujourd’hui&thinsp;? Par quelle porte se faufiler afin de rencontrer au mieux un processus créatif, d’en comprendre les enjeux et d’en ressentir la sensibilité&thinsp;? Comment aller avec confiance vers l’œuvre théâtrale&thinsp;? Approcher une création peut être passionnant, à partir du moment où les jalons sont posés… La gageure n’est pas seulement<br/>de savoir qui est Molière ou Shakespeare mais d’appréhender les nouvelles formes scéniques, d’être en contact intime avec l’art d’aujourd’hui, de le ressentir, d’en cerner les contours<br/>et de plonger dans son élaboration. 
    </p>
    <blockquote>
    «&thinsp;Ce que j’aimerais vous proposer&thinsp;? C’est simplement rencontrer l’œuvre artistique avec vos étudiants, vos proches, vos collègues… Et, pour ce faire, il s’agirait d’imaginer ensemble quelles seraient les activités les plus adéquates à leur proposer.&thinsp;» 
    </blockquote>
    <p>
    Afin de vous faciliter la tâche, j’ai composé ce petit guide qui reprend une sélection des spectacles accessibles à votre public (p. 3&ndash;8), et les activités d’accompagnement que nous vous suggérons afin de préparer, d’éveiller votre public de la manière la plus juste (p. 8&ndash;9). Nous désirons optimiser la qualité de rencontre entre l’art et le spectateur et privilégier l’échange<br/>à la consommation de masse.
    </p>
    <p>
    «&thinsp;Qu’est-ce qui me fait sortir la tête de l’eau&thinsp;» est le thème du projet de médiation artistique que nous développerons cette année 2013&ndash;2014. N’hésitez pas à nous contacter si vous désirez vous inscrire dans ce beau projet que vous trouverez page 10.
    </p>
    <p>
    Enfin pour les informations pratiques, jetez-vous sur la page 14&thinsp;!
    </p>
    <p>
    <em>Isabelle Colassin</em>, <br />médiatrice artistique, <br />
    02 737 70 18
    </p>
    
    <div class="image-cmjn" class="image-cmjn" style="width: 25%; height:119px; margin-right:0px; margin-top:15px; margin-left:14px;">
        <img alt="" class="preview" src="materials/isa/photoisa2-trame-G.jpg" style="width: 100%; margin-top:0px; margin-left:0px" /> 
        <img alt="" class="noir vert" src="materials/isa/photoisa2-trame.jpg" style="width: 100%; margin-top:0px; margin-left:0px"/> 
   </div>
    
    
</article>


<div class="page-break"></div>

<div class="partsup" style="margin-top:60px">Sélection de spectacles à destination des écoles et des associations</div>

<article id="fusee">
    <div class="titre">
        <h5>Fusée</h5>
        <h2 class="supplement">glöörgh opera</h2> 
    </div>

    <div style="width: 31%;">
        <div class="type">
            <h3>Création Théâtre</h3>
        </div>
        <div class="artiste">
            <h4>Clinic Orgasm Society</h4>
        </div>
    </div>

    <div class="date" style="width: 22%;">
        <p>Du 25 septembre au 5 octobre à 20h30 <br/> Amphithéâtre</p>
    </div>

    <div class="resume texte supplement">
        <p>
        Torturons en direct un Glöörgh, type d’extra-terrestre assez redoutable,<br/> et questionnons-nous : qu’est-ce qui est humain, qu’est-ce qui ne l’est pas? La pulsion de la destruction est-elle « normale »&thinsp;? Comment est-elle légitimée dans un cadre sociétal&thinsp;? Comment est-on prêt à détruire ce qui est étranger à nous&thinsp;? Comment nous manipule-t-on&thinsp;? 
        </p>
    </div>

    <div class="bible" style="width:36%">
        <dl>
            <dt>Conception</dt>
            <dd>Ludovic Barth et Claire Deville</dd>
            <dt>Mise en Scène</dt>
            <dd>Ludovic Barth</dd>
            <dt>Collaboration artistique</dt>
            <dd>Mathylde Demarez</dd>
            <dt>Musique</dt>
            <dd>Rodolphe Coster</dd>
            <dt>Lumière</dt>
            <dd>Marc Lhomme</dd>
            <dt>Son</dt>
            <dd>Benjamin Dandoy</dd>
            <dt>Interprétation</dt>
            <dd>Rodolphe Coster, Gregory Duret, Eno Krojanker, Anne-Fleur Inizan</dd>
        </dl>
    </div>

    <div class="production" style="width:38%;">
        <p>
        Une production de la Clinic Orgasm<br/>Society en coproduction avec la Balsamine, le Théâtre Varia, le manège.mons / Centres Dramatiques de la Fédération Wallonie-Bruxelles, le PBA + Eden (Charleroi), Le Grand Bleu – ENPDA Lille Nprd/Pas-de-Calais. Avec le soutien du centre des Arts Scéniques (CAS) et de la SACD. Avec l’aide du Conseil de l’aide aux projets théâtraux (CAPT).
        </p>
    </div>

    <div class="image-cmjn" style="width: 30%; height: 135px; margin-left:-30px;">
        <img alt="" class="preview" src="../photos/layers-processed/orgasm/orgasm_Calque 4-G.png" style="width: 100%; z-index:-30; " />
        <img alt="" class="noir vert" src="../photos/layers-processed/orgasm/orgasm_Calque 4.png" style="width: 100%; z-index:-30;" />
    </div>
    
    <div class="fiche" style="width: 30%;">
        <p class="intitule">Niveau  français<p>
        <p >Accessible</p>
    </div>
    <div class="fiche" style="height:auto">    
         <p class="intitule" >Âge minimum</p>
         <p>16/17 ans</p>
    </div>

    <div class="image-cmjn" style="width: 15%; height: 87px;">
        <img alt="" class="preview" src="../photos/layers-processed/orgasm/orgasm_Calque 15-G.png" style="width: 220%; z-index:-30; margin-left: -130px;" />
        <img alt="" class="noir vert" src="../photos/layers-processed/orgasm/orgasm_Calque 15.png" style="width: 220%; z-index:-30; margin-left: -130px;" />
    </div>

    <div class="fiche" style="height:auto">
         <p class="intitule">Discipline</p>
          <p>Théâtre</p>
    </div>
    
 
    
    <div class="fiche" style="width: 24%">
          <p class="intitule">Thématiques abordées</p>
          <p>La normalité et la destruction</p>
    </div>
    
    
      <div class="full" style="width: 27%; height: 237px;">
        <img alt="" class="preview" src="../photos/layers-processed/orgasm/orgasm_1-G.png" style="width: 163%; z-index:100; margin-left: -40px;" />
        <img alt="" class="noir vert" src="../photos/layers-processed/orgasm/orgasm_1.png" style="width: 163%; z-index:100; margin-left: -40px;" />
    </div>   
    
    <div class="fiche" style="width: 37%;">
          <p class="intitule">Particularités</p>
          <p>Utilisation du chant dans le spectacle. Humour décalé. Le spectateur peut être mis à contribution lors de la présentation. Très ludique.</p>
    </div>
    </dl>
    
    <div class="atelier" style="width: 29%; margin-top:-105px; margin-left:-15px; clear:left;">
        <p>
        Atelier avec les artistes, ouvert au public, le samedi 28 septembre, de 17h à 19h, à la Balsamine : imagination/construction de machines de torture.
        </p>
    </div>

<img src="logo-piece_3-G.svg"  style="position:absolute; top:700px; left:329px; z-index:1000" />
<div class="page-break"></div>
</article>



<article id="les-moutons" style="padding-top: 60px;">
    <div class="titre" >
        <h5>Les Moutons</h5>
    </div>
    <div style="width: 25%">
        <div class="type">
            <h3>Reprise Théâtre</h3>
        </div>
        <div class="artiste">
            <h4>Schieve Compagnie</h4>
        </div>
    </div>
    <div class="date" style="width: 25%;">
        <p>
            Du 15 au 26 octobre à 20h30 <br /> Foyer
        </p>
    </div>

    <div class="resume texte supplement">
        <p>
        Corinne et Corinne, un mouton blanc et un mouton noir, ont soif de liberté<br/>et décident de rallier le camp des Hommes… Elles philosophent quelque peu sur la question, qui n’est certainement pas anodine, et surtout de manière truculente…
        </p>
    </div>

    <div class="image-cmjn" style="width: 33%; height:146px;">
        <img alt="" class="preview" src="../photos/reprises/les_moutons-G.png" style="width: 1230px; z-index:-30; margin-left: -70px; margin-top: -1122px;" />
        <img alt="" class="noir rose" src="../photos/reprises/les_moutons.png" style="width: 1230px; z-index:-30; margin-left: -70px; margin-top: -1122px;" />
    </div>

    <div class="bible" style="width:32%;">
        <dl>
            <dt>Concept, écriture</dt>
            <dd>Élena Perez et Lise Wittamer</dd>
            <dt>Interprétation</dt>
            <dd>Élena Perez, Renaud Garnier–Fourniguet, Lise Wittamer</dd>
            <dt>Scénographie</dt>
            <dd>Mathieu Chevallier</dd>
            <dt>Conseiller artistique</dt>
            <dd>Olivier Boudon</dd>
            <dt>Diffusion</dt>
            <dd>Coraline Lefèvre, Julien Sigard (Habemus Papam)</dd>
        </dl>
    </div>
    <div class="production" style="width:31%;">
        <p>
            Une production de la Schieve Compagnie, en coproduction avec la Balsamine. Avec l’aide de la Fédération Wallonie-Bruxelles Service du Théâtre.
        </p>
    </div>
    <div class="fiche">
            <p class="intitule">Niveau  français</p>
            <p>Accessible</p>
    </div>    
    
        
    <div class="image-cmjn" style="width: 63%; height:164px; margin-right:15px">
        <img alt="" class="preview" src="../photos/reprises/les_moutons-G.png" style="width: 1230px; z-index:-30; margin-left: -70px; margin-top: -823px;" />
        <img alt="" class="noir rose" src="../photos/reprises/les_moutons.png" style="width: 1230px; z-index:-30; margin-left: -70px; margin-top: -823px;" />
    </div>
    
    <div class="fiche" style="height:auto">
            <p class="intitule">Âge minimum</p>
            <p>16/17 ans</p>
    </div>        
    <div class="fiche" style="height:auto">        
            <p class="intitule">Discipline</p>
            <p>Théâtre</p>
    </div>
    <div class="fiche" style="width: 28%">        
            <p class="intitule">Thématique abordée</p>
            <p>L’utopie existentialiste: et si nous refaisions le monde&thinsp;?</p>
    </div>


    <div class="fiche" style="width: 44%">
            <p class="intitule">Particularités</p>
            <p>Spectacle très amusant, beaucoup d’humour, de dérision, reprise de chansons connues, connotations philosophiques</p>

    </div>

    <div class="atelier" style="width: 34%; margin-top:-18px; margin-left:-10px; clear:left;">
        <p>
        Atelier avec les artistes, ouvert au public, le samedi 19 octobre, de 17h à 19h, à la Balsamine.
        </p>
    </div>


</article>




<article id="jai-endure-vos-discours">
<img src="logo-piece_2-G.svg" style="position: absolute; left:238px; top: 0px; z-index:100" />

<div class="page-break"></div>


    <div class="titre" style="width: 70%; margin-top:60px;">
        <h5>«J'ai enduré vos discours et j'ai l'oreille en feu»</h5>
    </div>

    <div style="width: 25%;margin-top: 100px;">
        <div class="type">
            <h3>Création Théâtre</h3>
        </div>
        <div class="artiste">
            <h4>Anne Thuot</h4>
        </div>

        <div class="date" style="margin-top: 14px; margin-left:4px" >
            <p>
                Du 6 au 16 novembre à 20h30 <br /> Amphithéâtre 
            </p>
        </div>
    </div>
    
        <div class="resume texte supplement" style="width:60%; margin-left:-10px">
        <p>
            Anne Thuot traverse les grands thèmes élisabethains (mort, inceste, vengeance, amour…) en excellant dans de passionnantes digressions sur différents sujets de notre société. Et si les grandes passions humaines étaient toujours d’actualité&thinsp;?
        </p>
    
  
    </div>
    
    <div class="image-cmjn" style="width: 70%; height:132px; margin-left:367px; margin-top:-143px">
        <img alt="" class="preview" src="../photos/layers-processed/annedroite/anne_Calque1-G.png" style="width: 138%; margin-left: -280px; margin-top: -330px;" />
        <img alt="" class="noir rose" src="../photos/layers-processed/annedroite/anne_Calque1.png" style="width: 138%; margin-left: -280px; margin-top: -330px;" />
    </div>




    <div class="bible" style="width:42%;clear:left">
    <dl>
        <dt>Mise en scène</dt>
        <dd>Anne Thuot</dd>
        <dt>Texte</dt>
        <dd>Caroline Lamarche</dd>
        <dt>Interprétation</dt>
        <dd>Marie Bos, Alice Hubball, Francesco Italiano, Natacha Nicora, Hervé Piron</dd>
        <dt>Création lumière</dt>
        <dd>Raphaël Noël</dd>
    </dl>
    </div>
    <div class="production" style="width:28%;">
        <p>
            Une production du Théâtre de l’Ancre et de la Balsamine. Avec l’aide de la Fédération Wallonie-Bruxelles, service Théâtre et le soutien de WBTD (aide à la diffusion). En partenariat avec le Centre des Arts Scéniques. Anne Thuot est artiste en Compagnie au Théâtre de l’Ancre.  
        </p>
    </div>
    
    <div class="fiche" style="width: 24%;">
            <p class="intitule">Niveau  français<p>
            <p>Accessible</p>
   </div>
   <div class="fiche">            
            <p class="intitule">Âge minimum</p>
            <p>16/17 ans</p>
    </div>
    
     <div class="image-cmjn" class="image-cmjn" style="width: 60%; height:415px; margin-left:-133px; margin-bottom:40px; margin-top:-83px">
        <img alt="" class="preview" src="../photos/layers-processed/annedroite/anne__MG_4923.CR2-G.png" style="width: 150%; margin-top:-4px; margin-left:-106px" /> 
    <img alt="" class="noir vert" src="../photos/layers-processed/annedroite/anne__MG_4923.CR2.png" style="width: 150%; margin-top:-4px; margin-left:-106px" /> 
   </div>
    
    <div class="fiche" style="width:115px;margin-left:35px; height:160px">        
            <p class="intitule">Discipline</p>
            <p>Théâtre</p>
    </div>
    
   
    
    <div class="fiche" style="width: 30%; margin-left:10px">        
            <p class="intitule">Thématiques abordées</p>
            <p>La vengeance, les passions humaines, questionnement sur notre société actuelle</p>
    </div>
    <div class="fiche" style="width: 49%;margin-left:35px">
            <p class="intitule">Particularités</p>
            <p>Spectacle très intéressant pour les écoles car brassant de grands thèmes de la tragédie de manière ludique et en lien avec des sujets sociétaux.</p>
    </div>
      
      <div class="atelier" style="width: 34%; margin-top:-18px; margin-left:308px; clear:left;">
        <p>
Atelier avec les artistes, ouvert au public, le samedi 9 novembre, de 17h à 19h, à la Balsamine</p>
    </div>

</article>



<article id="carte-blanche-garage-29">
    <img src="logo-piece_1-G.svg" style="position: absolute; left:-65px; top: -99px"/>

    <div class="titre" style="width: 65%; margin-top: 65px; margin-left:0px">
        <h5>Carte Blanche Garage 29</h5>
    </div>
    <div style="width: 25%; margin-top: 65px">
        <div class="type">
            <h3>Danse/performances</h3>
        </div>
        <div class="artiste">
            <h4>Compagnie Tupperware</h4>
        </div>
    </div>
    <div class="date" style="width: 25%;">
        <p>Le 29 novembre à 20h30</p>
    </div>

    <div class="resume texte supplement">
        <p>
        Nos déchets, nos sacs poubelles sont, en quelque sorte, des traces de notre vie… Comment transcender ces résidus&thinsp;?
        </p>
    </div>
    <div class="bible" style="width:43%;">
        <dl>
            <dt>Avec</dt>
            <dd>Laida Arietta Aldaz,Nicanor de Elia, Laida Aldaz Arietta, Jorge Jauregui Allue, Sabina Scarlat, Tiziano Lavoratornovi</dd>
            <dt>Costumes et régie</dt>
            <dd>Sari Brunel, Sylvain Formatche</dd>
            <dt>Coordination</dt>
            <dd>Nicanor de Elia</dd>
            <dt>Vidéo</dt>
            <dd>Guillaume Bautista</dd>
            <dt>Diffusion-communication</dt>
            <dd>Flavia Ceglie</dd>
        </dl>
    </div>
    <div class="production" style="width:36%;">
        <p>
        Une production de Garage 29 et de la Compagnie Tupperware, en coproduction avec la Balsamine. 
        </p>
    </div>
    <div class="fiche" style="width: 31%;">
        <p class="intitule">Niveau  français</p>
        <p>Très accessible (pour les primo-arrivants également)</p>
    </div>
    <div class="fiche">
        <p class="intitule">Âge minimum</p>
        <p>16/17 ans</p>
        
     
        
    </div>
    <div class="fiche">
        <p class="intitule">Discipline</p>
        <p>Danse </p>
    </div>
    <div class="fiche" style="width: 33%; margin-top:-89px">
        <p class="intitule">Thématiques abordées</p>
        <p>Quelles traces laissons-nous derrière nous? Thème de la monstruosité abordé.</p>
    </div>
    
    <div class="image-cmjn" style="width:38%;height: 309px; outline: none; margin-left: 15px; margin-top:-54px;z-index: -10;">
            <img alt="" class="noir vert" src="materials/supplement/garage29.png" style="width: 180%;margin-top: -84px;" />
            <img alt="" class="preview" src="materials/supplement/garage29-G.png" style="width: 180%;margin-top: -84px;" />
        </div>
        
    <div class="fiche" style="width: 33%;clear:left; margin-top:-182px">
        <p class="intitule">Particularités</p>
        <p>Utilisant les matières plastiques de manière ludique et inventive, ces performances danse enchanteront le tout public</p>
    </div>

        
    
    
    
    <div class="atelier" style="width: 83%; margin-top:-10px">
        <p>
        Le samedi 30 novembre dès 14h : atelier parents/<wbr>enfants, spectacle tout public et dîner
        </p>
    </div>

    <div class="fiche" style="width: 37%;">
        <p>
        <span class="under" style= "margin-top:-10px; height:69px;">14h00</span> <br/>
        Atelier ludique pour enfants à partir de 6 ans d’une part, et pour leurs parents d’autre part, autour de la matière plastique et des thèmes tels que l’obscurité, la monstruosité… 
        </p>
    </div>
    <div class="fiche" style="width: 36%;">   
        <p>
        <span class="under" style="background:white; margin-top:-10px;">16h00</span> <br/>
        <em>«Monsters»</em>, spectacle de danse pour jeune public autour des matériaux utilisés dans l’atelier, toujours sur le thème de la monstruosité.
        </p>
    </div>
    <div class="fiche" style="width: 17%;">
        <p>
        <span class="under">19h00</span> <br/>
        Dîner-concert avec «invités surprises»
        </p>
    </div>
    

</article>








<article id="vision" style="padding-top: 190px;">


<img src="logo-piece_5-G.svg" style="position: absolute; left:-68px; top: -70px" />


    <div class="titre">
        <h5>Vision</h5>
    </div>
    <div style="width: 25%;">
        <div class="type">
            <h3>Reprise Théâtre/Cinéma</h3>
        </div>
        <div class="artiste">
            <h4>Pierre Megos</h4>
        </div>
    </div>
    <div class="date" style="width: 25%;">
        <p>Du 25 février au 1<sup>er</sup> mars à 20h30 <br/> Amphithéâtre</p>
    </div>

    <div class="resume texte">
        <p>
        <em>Vision</em> brasse les mythes futuristes proposés par Hollywood et nous livre en temps réel une confrontation du théâtre et du cinéma, par le biais de la méthode Bluekey. 
        </p>
    </div>
    <div class="bible" style="width:39%;">
        <dl>
            <dt>Concept, écriture et mise en scène</dt>
            <dd>Pierre Megos</dd>
            <dt>Avec</dt>
            <dd>Pierre Megos, Florence Minder, Kian Cardoen, Lucas Bierlair, Alessandro de Pascale </dd>
            <dt>Assistant/Doublure</dt>
            <dd>Alessandro de Pascale</dd>
            <dt>Création vidéo</dt>
            <dd>Caroline De Decker</dd>
            <dt>Assistant vidéo</dt>
            <dd>Tonin Bruneton</dd>
            <dt>Création son</dt>
            <dd>Iannis Heaulme</dd>
            <dt>Création lumière et direction technique</dt>
            <dd>Julie Petit-Étienne</dd>
            <dt>Scénographe «cinéma»</dt>
            <dd>Thomas Delord</dd>
            <dt>Scénographie</dt>
            <dd>Christine Grégoire en collaboration avec Ledicia Garcia</dd>
            <dt>Construction</dt>
            <dd>Marc Defrise</dd>
            <dt>Maquilleuse</dt>
            <dd>Maud Liégeois</dd>
            <dt>Administration</dt>
            <dd>Manon Faure </dd>
            <dt>Remerciements</dt>
            <dd>Sémie, Stéphanie Scultore, Herbert Schuller et Dimitri Megos</dd>
        </dl>
    </div>

    <div class="image-cmjn" style="width: 43%; height:204px;">
        <img alt="" class="preview" src="../photos/reprises/beguinage-anderlecht9_trame-G.png" style="width: 270%; z-index:-30; margin-left: -363px; margin-top: -127px;" />
        <img alt="" class="noir vert" src="../photos/reprises/beguinage-anderlecht9_trame.png" style="width: 270%; z-index:-30; margin-left: -363px; margin-top: -127px;" />
    </div>

    <div class="production" style="width:43%;">
        <p>
        Une production de Mothership asbl, en coproduction avec la Balsamine avec l'aide du Service général des Arts de la Scène de la Fédération Wallonie-Bruxelles, Service Théâtre et le soutien du WBTD (aide à la diffusion).
        </p>
    </div>
    <div class="fiche" style="width: 48%; clear:left;">
        <p class="intitule">Niveau  français</p>
        <p>En anglais (mais très peu de dialogues, beaucoup de séquences muettes), sur-titré  en français et néerlandais.
        Très accessible (pour les primo-arrivants également).</p>
    </div>
    <div class="fiche">
        <p class="intitule">Âge minimum</p>
        <p>14/15 ans</p>
    </div>
    <div class="fiche">
        <p class="intitule">Disciplines</p>
        <p>Théâtre/cinéma</p>
    </div>
    <div class="fiche" style="width: 29%;">
        <p class="intitule">Thématiques abordées</p>
        <p>Les films de science-fiction hollywoodiens, les utopies futuristes</p>
    </div>
    <div class="fiche" style="width: 48%;margin-top:-68px">
        <p class="intitule">Particularités</p>
        <p>Ce spectacle a recueilli un énorme succès l’année passée. Il est très accessible tout en étant novateur. Venez en découvrir les trucages!  </p>
    </div>
    
      <div class="atelier" style="width: 34%; margin-top:-18px; margin-left:2px; clear:left;">
        <p>
Atelier avec les artistes, ouvert au public, le samedi 1er mars, de 17h à 19h, à la Balsamine. </p>    </div>

    <img src="logo-piece_4-G.svg" style="position: absolute; right:20px; top:950px" />
    
    <div class="page-break"></div>
</article>






<article id="k-barre" style="padding-top: 60px;">




    <div class="titre" style="width: 50%;">
        <h5>K Barré #1</h5>
        <h2 class="supplement">le K des Femmes</h2>
    </div>
    <div style="width: 25%;">
        <div class="type">
            <h3>Création Danse/textes + Concert </h3>
        </div>
        <div class="artiste">
            <h4>Barbara Mavro Thalassitis</h4>
        </div>
    </div>
    <div class="date" style="width: 25%;">
        <p>Du 19 au 22 mars (avec option pour le 18) à 20h30 <br/> Amphithéâtre + Foyer</p>
    </div>

    <div class="atelier" style="width:44%">
        <p>
        Célébration barrée de la femme par le biais du mouvement… Faisons et défaisons les clichés&thinsp;!
        </p>
    </div>
    <div class="numbers">
        <h2 class="supplement">En extra</h2>
        <h4>Simone elle est bonne</h4>
        <h3>concert</h3>
    </div>
    
   <div class="image-cmjn" class="image-cmjn" style="width: 55%; height:281px; margin-right:10px; margin-bottom:40px; margin-left:-90px; clear:left">
        <img alt="" class="preview" src="../photos/retable_barbara-trame-G.png" style="width: 247%; margin-top:-383px; margin-left:125px" /> 
        <img alt="" class="noir vert" src="../photos/retable_barbara-trame.png" style="width: 247%; margin-top:-383px; margin-left:125px"/> 
   </div>
    
    
    <div class="resume" style="width:37%; margin-left:10px; margin-bottom:10px">
        <p>
        « Simone elle est bonne » décline avec humour les stéréotypes de notre société, sur un air d’électro punk.
        </p>
    </div>

    <div class="bible" style="width:36%;">
        <dl>
            <dt>Création</dt>
            <dd>Barbara Mavro Thalassitis, en collaboration avec Lydia Lunch, Maria Clara Villa Lobos…</dd>
            <dt>Avec</dt>
            <dd>Lydia Lunch, Maria Clara Villa Lobos… (distribution en cours) </dd>
            <dt>Chorégraphie, scénographie et costumes</dt>
            <dd>Barbara Mavro Thalassitis </dd>
        </dl>
    </div>
    <div class="production" style="width:45%; clear:left; margin-top:-32px;">
        <p>
        Une production de Roberta DC, en coproduction avec la Balsamine. Avec le soutien de la Zone Liège.
        </p>
    </div>


    <div class="fiche" style="clear:left">
        <p class="intitule">Niveau  français</p>
        <p>Très accessible </p>
    </div>
    <div class="fiche">
        <p class="intitule">Âge minimum</p>
        <p>16/17 ans</p>
    </div>
    <div class="fiche">
        <p class="intitule">Disciplines</p>
        <p>Danse et concert</p>
    </div>
    <div class="fiche" style="width: 38%;">
        <p class="intitule">Thématique abordée</p>
        <p>Place des femmes dans notre société et les clichés qui en sont véhiculés</p>
    </div>
    <div class="fiche" style="width: 37%;">
        <p class="intitule">Particularités</p>
        <p>Très punch et déjanté, avec un esprit rock/punk, cet événement enchantera les esprits jeunes et questionnera de manière pertinente</p>
    </div>
    <div class="atelier" style="width: 36%;margin-top:-69px;">
        <p>
        Atelier avec Barbara Mavro Thalassitis, ouvert au public le samedi 22 mars, de 17h à 19h, à&nbsp;la&nbsp;Balsamine
        </p>
    </div>

        <div class="page-break"></div>
</article>




<article id="a-la-carte" style="padding-top: 15px;">

<div class="partsup">Activités proposées autour des spectacles&thinsp;:<br/>à la carte&thinsp;!</div>
            
<table>
    <tr>
        <th class="vide" style="height: 96px">
            <img alt="" class="preview" src="../materials/extract-G/crachat.gif" style="height: 96px; top: 0;" />
            <img alt="" class="noir vert" src="../materials/extract/crachat.gif" style="height: 96px; top: 0;" />
        </th>
        <th>Ateliers </th>
        <th>Perfor&shy;mances inter&shy;actives</th>
        <th>Accom&shy;pa&shy;gne&shy;ments thématiques</th>
        <th>Atelier ponctuel avec les artistes</th>
    </tr>
    <tr>
        <td>
            <div>T o u t</div>
            <div>s p e c t a c l e</div>
        </td>
        <td>Visite du théâtre, assister à une répétition, atelier initiation jeu (50’/70’)</td>
        <td>Toutes les performances peuvent être choisies</td>
        <td>«Clés du théâtre d’aujourd’hui» (50’);
            Langages corporels (50’) </td>
        <td>Rencontre avec les artistes</td>
    </tr>
    <tr>
        <td><div>F u s é e</div></td>
        <td>Atelier ludique&thinsp;: <em>Qu’est-ce que la «normalité»&thinsp;?</em>; <em>Et qu’en est-il de nos peurs&thinsp;?</em> (50’)</td>
        <td class="vide">
            <img alt="" class="preview" src="../materials/extract-G/cloud.gif" style="height: 212px;" />
            <img alt="" class="noir vert" src="../materials/extract/cloud.gif" style="height: 212px;" />
        </td>
        <td class="vide">
            <img alt="" class="preview" src="../materials/extract-G/floor.gif" style="height: 212px;" />
            <img alt="" class="noir vert" src="../materials/extract/floor.gif" style="height: 212px;" />
        </td>
        <td>28 septembre 17→19h :
        construction de Machines de torture</td>
    </tr>
    <tr>
        <td>
            <div>L e s </div>
            <div>m o u t o n s</div>
        </td>
        <td>Atelier d’écriture avec les actrices : <em>Réécrivons le monde…</em> (50’)</td>
        <td>Écritures scéniques (50’) </td>
        <td class="vide" style="height: 207px;">
            <img alt="" class="preview" src="../materials/extract-G/gradient.gif" style="height: 207px;" />
            <img alt="" class="noir vert" src="../materials/extract/gradient.gif" style="height: 207px;" />
        </td>
        <td>19 octobre 17→19h :
        mettre en jeu le corps sur scène</td>
    </tr>
    <tr>

        <td>
            <div style="width: 80px; margin: 0;">
                <div>J’ a i</div>
                <div>e n d u r é </div>
                <div>v o s </div>
                <div>d i s c o u r s …</div>
            </div>
        </td> 
        <td>Jeux dont vous êtes le héros&thinsp;:
            <em>Et si tu jouais dans une tragédie, qu’est-ce que tu ferais&thinsp;?</em>            (50’)</td> 
        <td>Écritures scéniques (50’)</td> 
        <td><em>Qu’en est-il de nos passions humaines&thinsp;?</em> (30’)</td> 
        <td>9 novembre 17→19h</td> 
    </tr>
</table>
<div class="page-break"></div>
<table style="margin-top: 60px;">
    <tr> 
        <td>
            <div style="width: 40px">
                <div>G a r a g e </div>
                <div>2 9</div>
            </div>
        </td> 
        <td class="vide">
            <img alt="" class="preview" src="../materials/extract-G/flammes.gif" style="height: 132px;" />
            <img alt="" class="noir vert" src="../materials/extract/flammes.gif" style="height: 132px;" />
        </td>
        <td>Langages corporels (50’)</td>
        <td class="vide">
            <img alt="" class="preview" src="../materials/extract-G/fire-crackers.gif" style="height: 132px;" />
            <img alt="" class="noir vert" src="../materials/extract/fire-crackers.gif" style="height: 132px;" />
        </td>
        <td>30 novembre 14h : parents/enfants &mdash;            monstruosité</td> 
    </tr> 
    <tr> 
        <td>
            <div>T r i l o g i e </div>
            <div>d e </div>
            <div>l’ E n f e r </div>
        </td>
        <td>Spectacle non repris dans le livret, voir le programme de            saison</td> 
        <td class="vide">
            <img alt="" class="preview" src="../materials/extract-G/lignes-obliques.gif" style="height: 168px;" />
            <img alt="" class="noir vert" src="../materials/extract/lignes-obliques.gif" style="height: 168px" />
        </td>
        <td class="vide">
            <img alt="" class="preview" src="../materials/extract-G/explosion-violente.gif" style="height: 168px;" />
            <img alt="" class="noir vert" src="../materials/extract/explosion-violente.gif" style="height: 168px;" />
        </td>
        <td>1<sup>er</sup> février 17→19h&nbsp;:
            Lecture au lutrin d’extraits du texte</td> 
    </tr> 
    <tr>
        <td>
            <div>V i s i o n</div>
        </td> 
        <td>Visite de l’envers du décor (15’) ; atelier Bluekey            (30’)</td> 
        <td>Hybridité, transdisciplinarité ou Écritures            scéniques (50’) </td> 
        <td><em>Une vision de l’utopie au cinéma…</em>            (30’)</td> 
        <td>1<sup>er</sup> mars 17→19h</td> 
    </tr> 
    <tr> 
        <td>
            <div>K</div>
            <div>B a r r é</div>
       </td> 
       <td>Atelier danse autour des clichés de la femme (50’/70’)</td> 
       <td>Langages corporels (50’)</td> 
       <td><em>Le K des Femmes</em>           (30’)</td> 
       <td>22 mars 17→19h</td> 
   </tr> 
   <tr> 
       <td>
           <div>L a </div>
           <div>F o r ê t</div>
       </td>
        <td>Spectacle non repris dans le livret, voir le programme de            saison</td> 
        <td class="vide">
            <img alt="" class="preview" src="../materials/extract-G/lignes avec oblique.gif" style="height: 114px;" />
            <img alt="" class="noir vert" src="../materials/extract/lignes avec oblique.gif" style="height: 114px;" />
        </td>
        <td class="vide">
            <img alt="" class="preview" src="../materials/extract-G/grand-canyon-à--ciel-courbé.gif" style="height: 114px;" />
            <img alt="" class="noir vert" src="../materials/extract/grand-canyon-à--ciel-courbé.gif" style="height: 114px;" />
        </td>
        <td>5 avril 17→19h : composition           d’opéras</td> 
    </tr> 
</table>


    <div class="image-cmjn" style="width: 100%; height: 84px;">
        <img alt="" class="preview" src="../materials/extract-G/pinceau.gif" style="width: 100%;" />
        <img alt="" class="noir vert" src="../materials/extract/pinceau.gif" style="width: 100%;" />
    </div>

<div class="page-break"></div>

<div class="pratique" style="margin-top: 60px;">
    <p>
    Libre à vous de composer votre propre parcours d’accompagnement à travers nos spectacles et nos activités (gratuites).
    </p>
</div>

<div style="width: 26%">
    <div class="pratique">
        <p>
        À titre d’exemples :
        </p>
    </div>
    <div class="pratique" style="height: 426px;">
        <p>
        <span class="intitule">Public de personnes peu initiées au théâtre d’aujourd’hui</span> <br/> Visite du théâtre ou «Clés du théâtre d’aujourd’hui», <em>Les Moutons</em>, suivi d’une rencontre avec les interprètes, l’atelier Bluekey, <em>Vision</em>.
        </p>
    </div>
</div>

<div class="pratique" style="width: 40%">
    <p>
    <span class="intitule">Public de jeunes ados</span> <br/> «Clés du théâtre d’aujourd’hui», <em>Les Moutons</em>, suivi d’un atelier d’écriture avec les interprètes, <em>J’ai enduré vos discours</em>, préparé par la performance « écritures scéniques » et l’atelier thématique « qu’en est-il de nos passions humaines », <em>Vision</em>, préparé par la performance écritures scéniques et l’atelier thématique « Une vision de l’utopie au cinéma », la visite de l’envers du décor le soir même, et <em>Le K des femmes</em>,  suivi d’un débat autour de la place des femmes dans notre société.
    </p>
</div>
<div class="pratique" style="width: 34%; height: 510px;">
    <p>
    <span class="intitule">Public habitué à fréquenter les salles, aimant les ateliers</span> <br/>
    <em>Fusée</em> préparé par l’atelier ludique autour de la normalité et la performance sur la transdisciplinarité,<br/><em>J’ai enduré vos discours</em>, préparé par «&nbsp;le jeu dont vous êtes le héros&thinsp;», <em>Les Moutons</em> et la performance « écritures scéniques ». 
    </p>
</div>

<div class="pratique" style="width: 50%;">
    <p>
    <span class="intitule">Les performances interactives</span> <br/> Une équipe de 2 ou 3 personnes<br/>(une attachée pédagogique : Isabelle Colassin, un des deux directeurs artistiques de la Balsamine&thinsp;: Monica Gomes et Fabien Dehasseler, et un éventuel artiste) viendront à vous en tant que pédagogues singuliers de leur pratique et en tant que performeurs. Pendant 50 minutes, nous vous inviterons à pénétrer dans des univers particuliers en partageant et en «&nbsp;actant&thinsp;» un aspect des créations proposées dans notre saison.
    </p>
</div>

<div class="pratique" style="width: 50%; height: 348px;">
    <p>
    <span class="intitule">Les ateliers Balsa</span> donnés ponctuellement, le samedi, par les artistes de chaque spectacle, ils permettent de rencontrer autrement la démarche artistique des créateurs. Vous formerez un petit groupe de 15 à 20 personnes maximum et pourrez vivre une démarche artistique de l’intérieur. L’atelier est gratuit pour le public mais il est obligatoire de réserver pour y participer. 
    </p>
</div>

<div class="page-break"></div>
</article>



<article id="mediation-artistique" class="bordure-bariolee">


<div style="text-align: center; float: none;">
    <h1 class="partsup" style="display: inline-block">Projet de médiation artistique</h1>
    <h2 class="supplement" style="display: inline-block">qu’est-ce qui me fait sortir la tête de l’eau ?</h2>
</div>

    <p>
    Qu’est-ce qui nous fait hurler de plaisir tous les matins&thinsp;? Qu’est-ce qui nous fait grimper aux murs&thinsp;? Qu’est-ce qui fait que l’on chante à tue-tête parce que, dans l’air, il y a quelque chose? Où allons-nous en cachette pour recharger nos batteries&thinsp;? Pourquoi ce truc, on le fait, on l’écoute, on le sent, on le voit, on le touche, encore et encore&thinsp;? Pourquoi on aime cela par dessus tout&thinsp;? Quels sont ces petits plus de la vie, ces petits extras qui nous font parfois sourire quand nous avons besoin de pleurer&thinsp;? Parfois, on oublie de regarder, parfois on vit sur des rails. Mais la vie est là, brute, belle, émouvante. La question de l’art est une question de partage du sensible. Et c’est ce que nous vous proposons. C’est une question de patrimoine commun, l’idée de mettre l’art comme but de lien social et que l’art du dehors rejoigne l’art du dedans. 
    </p>

<di>
    <p>
    Cette année, nous creuserons les différentes facettes de ce sujet excitant par le biais de trois disciplines&thinsp;:
    </p>
</div>
<div class="pratique" style="width: 33%; background-color:white">
    <p>
    <span class="intitule">la danse</span> <br/> des ateliers réguliers avec des danseurs confirmés seront donnés en préparation d’un événement performatif auxquels les participants seront libres de prendre part ou non.
    </p>
</div>
<div class="pratique" style="width: 33%; height: 260px;">
    <p>
    <span class="intitule">le théâtre performatif</span> <br/> un groupe d’artistes vous invitera à intégrer un événement théâtral présenté<br/>à la Balsamine.
    </p>
</div>
<div class="pratique" style="width: 33%; height: 290px;">
    <p>
    <span class="intitule">l’art plastique</span> <br/> une récolte de matériaux (vidéos, peintures, photos, éléments bruts, etc.) sera réalisée autour du sujet et ceux-ci seront mis en forme par un artiste.
    </p>
</div>
<div class="pratique" style="margin-bottom:100px">
    <p>
    Si cela vous intéresse, d’une manière ou d’une autre, n’hésitez pas à me contacter. Les dates d’atelier et le nom des intervenants vous seront communiqués très prochainement.
    </p>
</div>

</article>



<div class="page-break"></div>



<article id="infos-pratiques" class="bordure-bariolee">

    <h1 class="partsup" style="width: 50%;">Informations pratiques</h1>

    <div class="pratique" style="outline: none">
        <p>
        Isabelle Colassin, service médiation artistique : 02 737 70 18 <br/>
        N’hésitez pas à laisser un message en donnant vos disponibilités ou à envoyer un mail à isabelle.colassin@balsamine.be
        </p>
    </div>

    <!--<div class="titre" style="width: 100%">-->
         <!--<h2 class="supplement">Tarifs</h2>-->
     <!--</div>-->

     <div class="pratique numbers" style="width:70%;  text-transform: none">
         <span class="lettrine">Tarifs de groupe</span> <div class="pratique"
             style="width: 41%; height: 256px; "> Le paiement des réservations
             de groupe doit s’effectuer 10&nbsp;jours avant la date de
             représentation choisie.  </div> <div class="pratique numbers"
             style="width: 59%; "> <span class="intitule">Groupe adulte</span>
             (à partir de 10 personnes) : 10€ la place + 1 place offerte à
             l’organisateur </div> <div class="pratique numbers" style="width:
             59%; "> <span class="intitule">Groupe étudiant</span> (à partir de
             10 personnes) : 6€ la place + 1 place offerte à l’enseignant
     </div> </div>

     <div class="pratique numbers" style="width:20%;  text-transform: none; ">
         <span class="intitule">Article 27</span> et <span class="intitule">Arsène 50</span>
     </div>
     <div class="pratique numbers" style="width:24%;  text-transform: none; ">
         <span class="intitule">Tarifs étudiants <br /> en écoles supérieures artistiques</span> <br/>4€
     </div>
     <div class="pratique numbers" style="width:30%;  text-transform: none">
         <span class="intitule">Tarifs réduits</span> <br />8€ &mdash; prévente 6€
         (étudiants, +&nbsp;60 ans, demandeurs d’emploi, schaerbeekois)
     </div>
       <div class="pratique numbers" style="width:30%;  text-transform: none; margin-top: -109px; margin-left: 270px;">
         <span class="intitule">CarteProf <br/>et FédéCarte</span> <br />8€ 
     </div>
     


<img src="logo-piece_6-G.svg" style="margin-left:0px; margin-top: -90px" />



    <div class="pratique">
        <p>
        <span class="lettrine">Théâtre la Balsamine</span><br />
        Avenue Félix Marchal, 1<br />
        1030 Bruxelles 
        </p>
    </div>
    <div class="pratique" style="width: 46%">
        <p>
        <span class="lettrine">Réservation</span><br /> 02 735 64 68
www.balsamine.be
        </p>
    </div>
    <div class="pratique">
        <p>
        <span class="lettrine">Bus et métro</span><br />
        Bus 29, 64, 28, 61 (Dailly) &mdash; Bus 63 (Plasky) &mdash; Tram 25 (Meiser) &mdash; Bus 410, 358, 351, 318 (Dailly) &mdash; Metro Madou &mdash; Collecto 051 Dailly &mdash;  Villo &mdash; Bus de nuit N05 (Plasky) et N04 (Meiser)
        </p>
    </div>

    <div class="page-break"></div>


 <div style="width: 100%;  margin-top: 90px;">
        <img class="preview" style="float:left; width: 40px; margin: 5px 5px;"  src="../logos/fede-wallonie-bruxelles.svg" />
        <img class="preview" style="float:left; width: 40px; margin: 5px 5px;"  src="../logos/culture-be.svg" /> 

        <img class="preview" style="float:left;width: 40px; margin: 5px 5px;"  src="../logos/cocof.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 5px;"  src="../logos/wbi.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 5px;"  src="../logos/wbtd.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 5px;"  src="../logos/loterie.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 2px;"  src="../logos/arts-sceniques.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 2px;"  src="../logos/gracq.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 6px;"  src="../logos/article27.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 6px;"  src="../logos/arsene50.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 6px;"  src="../logos/ligue-famille.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 6px;"  src="../logos/dyoxide-gambette.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 6px;"  src="../logos/manege-mons.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 6px;"  src="../logos/cifas.svg" />

        <img class="preview" style="float:left;width: 20px; margin: 5px 6px;"  src="../logos/ctej.svg" />

        <img class="preview" style="float:left;width: 60px; margin: 5px 6px;"  src="../logos/mediatheque.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 6px;"  src="../logos/rtbf.svg" />

        <img class="preview" style="float:left;width: 40px; margin: 5px 6px;"  src="../logos/musiq3.svg" />

        <img class="preview" style="float:left;width: 60px; margin: 5px 6px;"  src="../logos/enseignement-be.svg" />

    </div>
      
      <div style="width: 100%; margin-top: 10px;">
     
                    <dt>Éditeur responsable</dt> 
                    Fabien Dehasseler, Avenue Félix Marchal, 1 - 1030 Bruxelles
                    <dt>Photographie</dt> 
                    Hichem Dahes sauf mentions contraires
                    <dt>Design</dt>
                    Open Source Publishing
                    <dt>Fichiers disponibles</dt> 
                    sous licence art libre sur osp.constantvzw.org
                    <dt>Impression</dt> 
                    Imprimerie Dereume, Drogenbos
 
  </div>
 
    </div>
    
   
    
    
</article>


</section>


    <script type="text/javascript" src="articles/jquery.min.js"></script>
    <script src="articles/less-1.3.0.min.js"></script>
    <script type="text/javascript">

        // INSÈRE UN CARACTÈRE UNICODE APRÈS <DD>
        (function($) {
            $.fn.postDD=function()
            {
                return this.each(function(){
                    $(this).after("<span>⁀</span>");
                });
            };
        })(jQuery);

        // INSÈRE DES <WBR> ENTRE CHAQUE LETTRE
        (function($) {
            $.fn.bainesify=function()
            {
                return this.each(function(){
            text = $(this).text().split("");
            html = text.join("<wbr>");
                    console.log(text + html);
            $(this).html(html);
                });
            };
        })(jQuery);

        $(document).ready(function(){
            // TITRAGES
            //$("h2").titrage();
            //$("h3").cadre();
            
            // FAKE PAGES
            doc_height = $("body").height();
            page_height = $("#fakepage").height(); 
            //page_height = 22; 
            nb_page = Math.ceil(doc_height/page_height);
            //gutter = parseInt($("#fakepage").css("top"));  // = 1cm
            
            for (i = 0; i <= nb_page; i++){
                $("#fakepage").clone().css({'outline-offset': '-1cm', 'display': 'block'}).attr("id","fakepage-p"+i).insertBefore($("#fakepage"));
                
                // FOLIO
                    $("#fakepage-p" + i + " .folio").html("<p>page " + (i+2) + "</p>");
            }

            // AJOUTE UN UNICODE APRÈS <DD>
            $("dd").postDD();

            $.each($("img"), function(){
                    console.log("path: " + $(this).attr("src") + " ; width: " + $(this).width()+ " ; height: " + $(this).height());
            });


            // PRÉPARATION À L'EXPORT, ON PASSE TOUT EN NOIR
                // BORDURES BARIOLÉES
                $("section#body.export article.bordure-bariolee").each(function(){
                    url = $(this).css("background-image");
                    url = url.replace("-G", "");
                    $(this).css("background-image", url);
                });
                // IMAGES
                $("section#body.export img.preview").css("display", "none");
                $("section#body.export img.noir").css("display", "block");
                
                // VECTEURS
                $("section#body.export *").css({"color": "black", "border-color": "black", "outline-color": "black"});
                //$(".folio p").css({"color": "black",});
        });
    </script>
    </body>
</html>