Download raw (47.4 KB)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Balsa 2014-2015</title>
<link rel="stylesheet" type="text/css" href="lib/reset.css" />
<link rel="stylesheet" href="lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" href="print.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="balsa.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="typography.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="folio.less" type="text/less" media="all" charset="utf-8">
</head>
<body>
<!-- PRINT MARKS -->
<div id="master-page">
<div class="print-marks">
<div class="crop-top-left">
<div class="crop-right" style="top: 0; right: 0;"></div>
<div class="crop-bottom" style="bottom: 0cm; left: 0;"></div>
</div>
<div class="crop-top-right">
<div class="crop-left" style="top: 0; left: 0;"></div>
<div class="crop-bottom" style="bottom: 0; right: 0;"></div>
</div>
<div class="crop-bottom-right">
<div class="crop-left" style="left: 0; bottom: 0;"></div>
<div class="crop-top" style="right: 0cm; top: 0;"></div>
</div>
<div class="crop-bottom-left">
<div class="crop-right" style="bottom: 0cm; right: 0;"></div>
<div class="crop-top" style="left: 0cm; top: 0"></div>
</div>
<section id="master-region" class="page">
<div class="cahier">
</div>
<section class="glose">
<div class="column20">
</div>
<div class="column20">
</div>
<div class="column20">
</div>
<div class="column20">
</div>
<div class="column20">
</div>
</section>
</section>
<section class="folio">
</section>
</div>
</div>
<div id="pages">
<div id="page-1" class="preview-page">
<div class="titre-courant"></div>
</div>
<div id="page-2" class="preview-page">
<div class="titre-courant">Édito</div>
</div>
<div id="page-3" class="preview-page">
<div class="titre-courant">Édito</div>
</div>
<div id="page-4" class="preview-page">
<div class="titre-courant">Ouverture</div>
<div class="moveable" style="top: 53px; left: 59px; width: 390px; height: 274px;">
<img class="fit-width" style="" src="images/images-programme/partition_ouverture-page-1.svg" />
</div>
<div class="moveable" style="top: 115px; left: 476px; width: 390px; height: 200px;">
<img class="fit-width" style="margin-top:-270px;" src="images/images-programme/partition_ouverture-page-1.svg" />
</div>
</div>
<div id="page-5" class="preview-page">
<div class="titre-courant">Ouverture</div>
<div class="moveable" style="top: 104px; left: 87px; width: 148px; height: 150px;">
<figure class="animalia-rhinicerus">
<img class="fit-width" src="images/images-programme/animalia-rhinicerus.gif" />
<figcaption>Dürer</figcaption>
</figure>
</div>
<div class="moveable" style="top: 68px; left: 270px; width: 118px; height: 196px;">
<figure class="animalia-dodo">
<img class="fit-width" src="images/images-programme/animalia-dodo-sharp.gif" />
<figcaption>Dodo - Lewis Caroll</figcaption>
</figure>
</div>
<div class="moveable" style="top: 97px; left: 418px; width: 125px; height: 187px;">
<figure class="animalia-crocodile">
<img class="fit-width" src="images/images-programme/animalia-crocodile.gif" />
<figcaption>Crocodile vénitien</figcaption>
</figure>
</div>
<div class="moveable" style="top: 131px; left: 591.09375px; width: 97px; height: 113px;">
<figure class="animalia-dragonfly">
<img class="fit-width" src="images/images-programme/animalia-dragonfly.gif" />
<figcaption>Libellule</figcaption>
</figure>
</div>
<div class="moveable" style="top: 330px; left: 538.09375px; width: 118px; height: 290px;">
<figure class="animalia-girafe">
<img class="fit-width" style="-webkit-transform:scaleX(-1);" src="images/images-programme/animalia-girafe.gif" />
<figcaption>Girafe du Sennaar</figcaption>
</figure>
</div>
<div class="moveable" style="top: 468px; left: 697px; width: 94px; height: 102px;">
<figure class="animalia-cockroach">
<img class="fit-width" src="images/images-programme/animalia-cockroach.gif" />
<figcaption>Cockroach</figcaption>
</figure>
</div>
<div class="moveable" style="top: 644px; left: 568px; width: 95px; height: 115px;">
<figure class="animalia-canthigaster">
<img class="fit-width" src="images/images-programme/animalia-canthigaster.gif" />
<figcaption>Canthigaster</figcaption>
</figure>
</div>
<div class="moveable" style="top: 704px; left: 239px; width: 126px; height: 313px;">
<figure class="animalia-poisson">
<img style="margin-left:0px; margin-top:140px; width: 100%;" src="images/criss-cross/lo-res/criss-cross_poisson.png" data-alt-src="images/criss-cross/criss-cross_poisson.gif" />
<figcaption>Poisson</figcaption>
</figure>
</div>
</div>
<div id="page-6" class="preview-page">
<div class="titre-courant">Chant I – Tisser sa toile</div>
<div class="images-chant">
<figure class="crisscross-canards" style="margin-top:80px; margin-left:20px">
<img class="fit-height" style="height:140px" src="images/chants/crisscross-canards.png" data-alt-src="images/chants/crisscross-canards.png" />
<figcaption></figcaption>
</figure>
<figure class="crisscross-poissons" style="margin-left:50px;">
<img class="fit-height" style="height:80px; margin-top:0px;" src="images/chants/crisscross-poissons.png" data-alt-src="images/chants/crisscross-poissons.png" />
<figcaption></figcaption>
</figure>
<figure class="crisscross-roche">
<img class="fit-height" style="height:130px; margin-top:0px; margin-left:0px;" src="images/chants/crisscross-roche.png" data-alt-src="images/chants/crisscross-roche.png" />
<figcaption></figcaption>
</figure>
</div>
<div class="images-chant bas" style="">
<figure class="crisscross-raie" style="margin-left:100px; margin-top:60px;">
<img class="fit-width" style="width:310px;" src="images/chants/crisscross_raie.png" data-alt-src="images/chants/crisscross_raie.png" />
<figcaption></figcaption>
</figure>
<figure class="crisscross-motte">
<img class="fit-height" style="height:50px; margin-left:140px; margin-top:200px;" src="images/chants/crisscross-terril.png" data-alt-src="images/chants/crisscross-terril.png" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-7" class="preview-page">
<div class="titre-courant">Criss Cross</div>
<div class="moveable" style="top: 78px; left: 78.75px; width: 272px; height: 271px;">
<figure class="crisscross-roche">
<img style="width: 100%;" src="images/criss-cross/lo-res/criss-cross-roche_hatched.png" data-alt-src="images/criss-cross/criss-cross-roche_hatched.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 239px; left: 541px; width: 194px; height: 305px;">
<figure class="crisscross-canards">
<img style=" width: 100%;" src="images/criss-cross/lo-res/criss-cross-canards.png" data-alt-src="images/criss-cross/criss-cross-canards.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 892px; left: 83.234375px; width: 399px; height: 210px;">
<figure class="crisscross-raie">
<img class="fit-width" src="images/criss-cross/lo-res/criss-cross_raie.png" data-alt-src="images/criss-cross/criss-cross_raie.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 780px; left: 580px; width: 120px; height: 155px;">
<figure class="crisscross-motte">
<img class="fit-width" src="images/criss-cross/lo-res/criss-cross_motte.png" data-alt-src="images/criss-cross/criss-cross_motte.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-8" class="preview-page">
<div class="titre-courant">Chant II – Qu'est ce qu'un monde?</div>
<div class="images-chant">
<figure class="madeleines-elephant" style="margin-top:120px;">
<img class="fit-height" style="height:100px" src="images/chants/madeleines-elephant.png" data-alt-src="images/chants/madeleines-elephant.png" />
<figcaption></figcaption>
</figure>
<figure class="madeleines-tombe1">
<img class="fit-height" style="height:130px; margin-left:40px; margin-top:20px;" src="images/chants/madeleines-tombe1.png" data-alt-src="images/chants/madeleines-tombe1.png" />
<figcaption></figcaption>
</figure>
<figure class="madeleines-tombe3" style="margin-left:30px">
<img class="fit-height" style="height:120px"
src="images/chants/madeleines-tombe3.png" data-alt-src="images/chants/madeleines-tombe3.png" />
<figcaption></figcaption>
</figure>
</div>
<div class="images-chant bas">
<figure class="madeleines-oiseau" style="height:110px; margin-left: 120px; margin-top:130px;">
<img class="fit-height" src="images/chants/madeleines-oiseau.png" data-alt-src="images/chants/madeleines-oiseau.png" />
<figcaption></figcaption>
</figure>
<figure class="madeleines-tombe2">
<img class="fit-height" style="height:100px; margin-top:130px; margin-left:80px;" src="images/chants/madeleines-tombe2.png" data-alt-src="images/chants/madeleines-tombe2.png" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-9" class="preview-page">
<div class="titre-courant">Nos petites madeleines</div>
<div class="moveable" style="top: 302px; left: 480px; width: 375px; height: 358px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant.png" data-alt-src="images/madeleines/madeleines-elephant.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 660px; left: 546px; width: 166px; height: 119px;">
<figure class="madeleines-defense">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-defense.png" data-alt-src="images/madeleines/madeleines-defense.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 785px; left: 585px; width: 85px; height: 90px;">
<figure class="madeleines-tombe2">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-tombe2.png" data-alt-src="images/madeleines/madeleines-tombe2.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 950px; left: 297px; width: 159px; height: 257px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-oiseau.png" data-alt-src="images/madeleines/madeleines-oiseau.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 879px; left: 585px; width: 101px; height: 183px;">
<figure class="madeleines-tombe3">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-tombe3.png" data-alt-src="images/madeleines/madeleines-tombe3.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 867px; left: 704px; width: 82px; height: 195px;">
<figure class="madeleines-tombe1">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-tombe1.png" data-alt-src="images/madeleines/madeleines-tombe1.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-10" class="preview-page">
<div class="titre-courant">Lungs – Skinstrap</div>
<div class="moveable" style="top: 568px; left: 287px; width: 80px; height: 209px;">
<figure class="madeleines-tombe4">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-tombe4.png" data-alt-src="images/madeleines/madeleines-tombe4.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 345px; left: 267px; width: 114px; height: 285px;">
<figure class="madeleines-tombe5">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-tombe5.png" data-alt-src="images/madeleines/madeleines-tombe5.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 793px; left: 291px; width: 81px; height: 115px;">
<figure class="madeleines-tombe6">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-tombe6.png" data-alt-src="images/madeleines/madeleines-tombe6.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-11" class="preview-page">
<div class="titre-courant">Dualskin – Casserole identitaire – OSP</div>
<div class="moveable" style="top: 350px; left: 512px; width: 130px; height: 240px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-oiseau-num.png" data-alt-src="images/madeleines/madeleines-oiseau-num.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 1010px; left: 144px; width: 130px; height: 240px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-oiseau-option.png" data-alt-src="images/madeleines/madeleines-oiseau-option.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 688px; left: 639px; width: 130px; height: 240px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-oiseau-spiro.png" data-alt-src="images/madeleines/madeleines-oiseau-spiro.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 688px; left: 509px; width: 130px; height: 240px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-oiseau-spiro-num.png" data-alt-src="images/madeleines/madeleines-oiseau-spiro-num.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 517px; left: 509px; width: 130px; height: 240px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-oiseau-tsp.png" data-alt-src="images/madeleines/madeleines-oiseau-tsp.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 517px; left: 639px; width: 130px; height: 240px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-oiseau-tsp-num.png" data-alt-src="images/madeleines/madeleines-oiseau-tsp-num.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 345px; left: 639px; width: 130px; height: 240px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-oiseau-tsp-round.png" data-alt-src="images/madeleines/madeleines-oiseau-tsp-round.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 142px; left: 80px; width: 150px; height: 240px;">
<figure class="madeleines-oiseau">
<img class="fit-width" style="margin-left: -20px;" src="images/madeleines/madeleines-oiseau-spiro-num-zoom.gif" data-alt-src="images/madeleines/madeleines-oiseau-spiro-num-zoom.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-12" class="preview-page">
<div class="titre-courant">Le nu civil – Vieil</div>
<div class="moveable" style="top: 345px; left: 236px; width: 130px; height: 240px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-4200.png" data-alt-src="images/madeleines/madeleines-elephant-tete-4200.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 553px; left: 236px; width: 130px; height: 240px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-num.png" data-alt-src="images/madeleines/madeleines-elephant-tete-num.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 750px; left: 236px; width: 130px; height: 240px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-7000.png" data-alt-src="images/madeleines/madeleines-elephant-tete-7000.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-13" class="preview-page">
<div class="titre-courant">Objets trouvés dans la recherche</div>
<div class="moveable" style="top: 310px; left: 510px; width: 130px; height: 170px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-1200.png" data-alt-src="images/madeleines/madeleines-elephant-tete-1200.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 310px; left: 660px; width: 130px; height: 170px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-disp1.png" data-alt-src="images/madeleines/madeleines-elephant-tete-disp1.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 509px; left: 510px; width: 130px; height: 170px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-disp2.png" data-alt-src="images/madeleines/madeleines-elephant-tete-disp2.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 509px; left: 660px; width: 130px; height: 170px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-disp3.png" data-alt-src="images/madeleines/madeleines-elephant-tete-disp3.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 703px; left: 510px; width: 130px; height: 170px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-disp4.png" data-alt-src="images/madeleines/madeleines-elephant-tete-disp4.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 703px; left: 660px; width: 130px; height: 170px;">
<figure class="madeleines-elephant">
<img class="fit-width" style="" src="images/madeleines/lo-res/madeleines-elephant-tete-disp5.png" data-alt-src="images/madeleines/madeleines-elephant-tete-disp5.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-14" class="preview-page">
<div class="titre-courant">Chant III – Être aux aguets</div>
<div class="images-chant bas">
<figure class="bleu-cheval" style="margin-top:-120px; margin-left:260px;">
<img class="fit-width" style="width:150px" src="images/chants/bleu.jpg" data-alt-src="images/chants/bleu.jpg" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-15" class="preview-page">
<div class="titre-courant">Bleu</div>
<div class="moveable" style="top: 765px; left: 280px; width: 471px; height: 379px;">
<figure class="bleu-cheval">
<img class="fit-width" style="-webkit-transform: scaleX(-1);" src="images/bleu-stipple-etire/lo-res/bleu5-rot.png" data-alt-src="images/bleu-stipple-etire/bleu5-rot.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 90px; left: 38px; width: 225mm; height: 75mm;">
<ul id="quizz-bleu">
<li class="proverbe">Col bleu </li>
<li class="proverbe">Un bleu </li>
<li>Être épris de quelqu'un</li>
<li class="proverbe">Être fleur bleue </li>
<li>Richesse représentée par la mer et le tourisme qui y est lié</li>
<li>Steak grillé extérieurement mais cru à l'intérieur</li>
<li class="proverbe">Conte bleu </li>
<li>Être dans l'incertitude, être dans un rêve</li>
<li class="proverbe">Colère bleue </li>
<li>Être mal en point, avoir mal au cœur</li>
<li class="proverbe">Être dans le bleu </li>
<li>Soldat de l'ONU</li>
<li class="proverbe">Être bleu de quelqu’un </li>
<li>Ouvrier</li>
<li class="proverbe">La planète bleue </li>
<li class="proverbe">Un bleu </li>
<li class="proverbe">La grande bleue </li>
<li>Personne très habile en cuisine</li>
<li>Combinaison de travail en toile bleue</li>
<li class="proverbe">Bleu-Bleu </li>
<li>Être candide, être naïf</li>
<li class="proverbe">Une peur bleue </li>
<li class="proverbe">Avoir le sang bleu </li>
<li class="proverbe">Steak bleu </li>
<li>Un spectacle de Stéphane Arcas</li>
<li>Discours mensonger</li>
<li class="proverbe">Être chocolat bleu pâle (expression belge) </li>
<li>Moment qui précède l'aube</li>
<li>Jeune recrue à l'armée</li>
<li class="proverbe">L'heure bleue </li>
<li>Un hématome</li>
<li class="proverbe">Casque bleu </li>
<li>Être d'origine noble</li>
<li>Colère violente</li>
<li>La planète Terre</li>
<li class="proverbe">Un bleu </li>
<li>Peur violente</li>
<li>La mer Méditerranée</li>
<li class="proverbe">L'or bleu </li>
<li class="proverbe">Cordon bleu </li>
</ul>
</div>
</div>
<div id="page-16" class="preview-page">
<div class="titre-courant">Chant IV – Les images font du bien à l'âme</div>
<div class="images-chant">
<figure class="katchen-oiseau">
<img class="fit-height" style="height:120px; margin-top:90px; margin-left:0px;" src="images/chants/katchen-oiseau.png" data-alt-src="images/chants/katchen-oiseau.png" />
<figcaption></figcaption>
</figure>
<figure class="katchen-armure" style="margin-top:0px; margin-left:50px;">
<img class="fit-height" style="height:130px;" src="images/chants/katchen-armure.png" data-alt-src="images/chants/katchen-armure.png" />
<figcaption></figcaption>
</figure>
<figure class="katchen-coeur">
<img class="fit-height" style="height:60px; margin-top:80px; margin-left:30px;" src="images/chants/katchen-coeur.png" data-alt-src="images/chants/katchen-coeur.png" />
<figcaption></figcaption>
</figure>
</div>
<div class="images-chant bas">
<figure class="katchen-chateau" style="margin-top:115px; ">
<img class="fit-height" style="height:80px;" src="images/chants/katchen-chateau.png" />
<figcaption></figcaption>
</figure>
<figure class="katchen-ver" style="margin-top:100px; margin-left:80px;">
<img class="fit-height" style="height:80px;" src="images/chants/katchen-ver.png" data-alt-src="images/chants/katchen-ver.png" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 53px; left: 59px; width: 390px; height: 294px;">
<img class="fit-width" style="margin-left:0px; width: 100%;" src="images/images-programme/partition_apres-page1.svg" />
</div>
<div class="moveable" style="top: 66px; left: 476px; width: 390px; height: 270px;">
<img class="fit-width" style="margin-left:0px; width: 100%; margin-top:-290px;" src="images/images-programme/partition_apres-page1.svg" />
</div>
</div>
<div id="page-17" class="preview-page">
<div class="titre-courant">Käthchen de Heilbronn</div>
<div class="moveable" style="top: 230px; left: 555px; width: 360px; height: 600px;">
<figure class="katchen-armure">
<img class="fit-width" src="images/katchen/katchen-armure.gif" />
<figcaption style="margin-top: -110px;"></figcaption>
</figure>
</div>
<div class="moveable" style="top: 140px; left: 707px; width: 200px; height: 150px;">
<figure class="katchen-ver">
<img class="fit-width" src="images/katchen/katchen-ver.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 932px; left: 137px; width: 280px; height: 179px;">
<figure class="katchen-chateau">
<img class="fit-width" src="images/katchen-chateau/katchen-chateau-4.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 716px; left: 559px; width: 219px; height: 244px;">
<figure class="katchen-oiseau">
<img class="fit-width" src="images/katchen/katchen-oiseau.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 968px; left: 560px; width: 228px; height: 217px;">
<figure class="katchen-coeur">
<img class="fit-width" src="images/katchen/katchen-coeur.gif" />
<figcaption style="margin-top: -30px;"></figcaption>
</figure>
</div>
</div>
<div id="page-18" class="preview-page">
<div class="titre-courant">Chant V – Se déterritorialiser</div>
<div class="images-chant">
<figure class="comment-octopus" style="margin-top:250px; margin-left:20px;">
<img class="fit-height" style="height:120px;" src="images/chants/comment-octopus.jpg" data-alt-src="images/chants/comment-octopus.jpg" />
<figcaption></figcaption>
</figure>
<figure class="enfoncures-tv" style="margin-top:0px; margin-left:50px;">
<img class="fit-height" style="height:110px;" src="images/chants/enfoncures-tv.png" data-alt-src="images/chants/enfoncures-tv.png" />
<figcaption></figcaption>
</figure>
</div>
<div class="images-chant bas">
<figure class="enfoncures-cage" style="margin-top:20px; margin-left:50px;">
<img class="fit-height" style="height:140px;" src="images/chants/enfoncures-cage.png" data-alt-src="images/chants/enfoncures-cage.png" />
<figcaption></figcaption>
</figure>
<figure class="enfoncures-cube" style="margin-top:120px; margin-left:30px;">
<img class="fit-height" style="height:140px;" src="images/chants/enfoncures-cube.png" data-alt-src="images/chants/enfoncures-cube.png" />
<figcaption></figcaption>
</figure>
<figure class="enfoncures-cochons" style="margin-top:120px; margin-left:30px;">
<img class="fit-height" style="height:80px;" src="images/chants/enfoncures-cochons-couches.png" data-alt-src="images/chants/enfoncures-cochons-couches.png" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-19" class="preview-page">
<div class="titre-courant" style="text-transforml:none;">cOMMENT dIRE</div>
<div class="moveable" style="top: 756px; left: 351px; width: 507px; height: 420px;">
<figure class="comment-octopus">
<img class="fit-width" style="-webkit-transform: scaleX(-1);" src="images/comment-dire/comment_octopus.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-20" class="preview-page">
<div class="titre-courant">Enfonçures</div>
<div class="moveable" style="top: 945px; left: 45px; width: 400px; height: 300px;">
<figure class="enfoncures-cochons">
<img style="margin-left:0px; width:100%" src="images/enfoncures/lo-res/enfoncures_cochons.png" data-alt-src="images/enfoncures/enfoncures_cochons.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 503px; left: 174.1666717529297px; width: 145px; height: 240px;">
<figure class="enfoncures-cage">
<img style="margin-left:0px; width:100%" src="images/enfoncures/lo-res/enfoncures_cage.png" data-alt-src="images/enfoncures/enfoncures_cage.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-21" class="preview-page">
<div class="titre-courant">Être(s) ou le jardin d'eden</div>
<div class="moveable" style="top: 938px; left: 366px; width: 227px; height: 221px;">
<figure class="enfoncures-tv">
<img style="width:100%" src="images/enfoncures/lo-res/enfoncures_tv.png" data-alt-src="images/enfoncures/enfoncures_tv.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-22" class="preview-page">
<div class="titre-courant">Chant VI – Le comique</div>
<div class="images-chant">
</div>
<div class="images-chant bas">
<figure class="kevin-singe01" style="margin-top:40px; margin-left:240px;">
<img class="fit-height" style="height:90px;" src="images/chants/kevin-singe01.png" data-alt-src="images/chants/kevin-singe01.png" />
<figcaption></figcaption>
</figure>
<figure class="kevin-singe04" style="margin-top:0px; margin-left:50px;">
<img class="fit-height" style="height:150px;" src="images/chants/kevin-singe04.png" data-alt-src="images/chants/kevin-singe04.png" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-23" class="preview-page">
<div class="titre-courant">L'écolier Kévin</div>
<div class="moveable" style="top: 790px; left: 129px; width: 290px; height: 287px;">
<figure class="kevin-singe01">
<img class="fit-width" src="images/kevin/kevin-singe01.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 156px; left: 541px; width: 266px; height: 417px;">
<figure class="kevin-singe04">
<img class="fit-width" src="images/kevin/kevin-singe04.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-24" class="preview-page">
<div class="titre-courant">Chant VII – Devenir</div>
<div class="images-chant">
<figure class="hantologie-zoiseaux" style="margin-top:40px; margin-left:0px;">
<img class="fit-height" style="height:110px;" src="images/chants/hantologie-zoiseaux.png" data-alt-src="images/chants/hantologie-zoiseaux.png" />
<figcaption></figcaption>
</figure>
<figure class="hantologie-beton" style="margin-top:40px; margin-left:20px;">
<img class="fit-height" style="height:90px;" src="images/chants/hantologie-beton.png" data-alt-src="images/chants/hantologie-beton.png" />
<figcaption></figcaption>
</figure>
<figure class="hantologie-cigogne" style="margin-top:40px; margin-left:80px;">
<img class="fit-height" style="height:130px;" src="images/chants/hantologie-cigogne.png" data-alt-src="images/chants/hantologie-cigogne.png" />
<figcaption></figcaption>
</figure>
<figure class="hantologie-oiseau-noir" style="margin-top:-20px; margin-left:0px;">
<img class="fit-height" style="height:90px;" src="images/chants/hantologie-oiseau-noir.png" data-alt-src="images/chants/hantologie-oiseau-noir.png" />
<figcaption style="margin-top: -20px;"></figcaption>
</figure>
</div>
<div class="images-chant bas">
<figure class="hantologie-kepi" style="margin-top:70px; margin-left:70px;">
<img class="fit-height" style="height:90px;" src="images/chants/hantologie-kepi.png" data-alt-src="images/chants/hantologie-kepi.png" />
<figcaption></figcaption>
</figure>
<figure class="hantologie-mort" style="margin-top:0px; margin-left:110px;">
<img class="fit-height" style="height:30px;" src="images/chants/hantologie-mort.png" data-alt-src="images/chants/hantologie-mort.png" />
<figcaption></figcaption>
</figure>
<figure class="hantologie-biblot" style="margin-top:40px; margin-left:-170px; position: relative; z-index: -100;">
<img class="fit-height" style="height:120px;" src="images/chants/hantologie-biblot.png" data-alt-src="images/chants/hantologie-biblot.png" />
<figcaption></figcaption>
</figure>
<figure class="hantologie-arbre" style="margin-top:40px; margin-left:60px;">
<img class="fit-height" style="height:90px;" src="images/chants/hantologie-arbre.png" data-alt-src="images/chants/hantologie-arbre.png" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-25" class="preview-page">
<div class="titre-courant">Hantologie</div>
<div class="moveable" style="top: 923px; left: 359px; width: 278px; height: 196px;">
<figure class="hantologie-biblot">
<img class="fit-width" style="" src="images/hantologie/hantologie-biblot-paperjs-ver.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 689px; left: 693px; width: 106px; height: 476px;">
<figure class="hantologie-cigogne">
<img class="fit-width" style="" src="images/hantologie/hantologie-cigogne-paperjs-bug.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 146px; left: 606px; width: 196px; height: 192px;">
<figure class="hantologie-cigogne">
<img class="fit-width" style="" src="images/hantologie/hantologie-cigogne-paperjs-zoom.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 383px; left: 503px; width: 145px; height: 222px;">
<figure class="hantologie-arbre">
<img class="fit-width" style="" src="images/hantologie-oiseaux-fourmis-paperjs/hantologie-oiseaux-fourmis-1.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 451px; left: 664px; width: 145px; height: 219px;">
<figure class="hantologie-arbre">
<img class="fit-width" style="" src="images/hantologie-oiseaux-fourmis-paperjs/hantologie-oiseaux-fourmis-3.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="moveable" style="top: 630px; left: 510px; width: 145px; height: 261px;">
<figure class="hantologie-arbre">
<img class="fit-width" style="" src="images/hantologie-oiseaux-fourmis-paperjs/hantologie-oiseaux-fourmis-2.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-26" class="preview-page">
<div class="titre-courant">Chant VIII – Process</div>
<div class="moveable" style="top: 81px; left: 59px; width: 390px; height: 310px;">
<img class="fit-width" style="" src="images/images-programme/partition_the-dying-swan_page-1.svg" />
</div>
<div class="moveable" style="top: 60px; left: 476px; width: 390px; height: 266px;">
<img class="fit-width" style="margin-top:-290px;" src="images/images-programme/partition_the-dying-swan_page-1.svg" />
</div>
<div class="images-chant">
<figure class="process-balsa" style="margin-top:60px; margin-left:-25px;">
<img class="fit-height" style="height:130px;" src="images/pif/balsa_vertical-hatched.gif" data-alt-src="images/pif/balsa_vertical-hatched.gif" />
<figcaption></figcaption>
</figure>
<figure class="process-balsa" style="margin-top:0px; margin-left:-25px;">
<img class="fit-height" style="height:130px;" src="images/pif/balsa-detoure-sharp-stipple.gif" data-alt-src="images/pif/balsa-detoure-sharp-stipple.gif" />
<figcaption></figcaption>
</figure>
<figure class="process-balsa" style="margin-top:10px; margin-left:-25px;">
<img class="fit-height" style="height:130px;" src="images/pif/balsa-detoure-tsp.gif" data-alt-src="images/pif/balsa-detoure-tsp.gif" />
<figcaption></figcaption>
</figure>
</div>
<div class="images-chant bas">
<figure class="process-balsa" style="margin-top:20px; margin-left:-20px;">
<img class="fit-height" style="height:150px;" src="images/pif/balsa-paperjs-ver.gif" data-alt-src="images/pif/balsa-paperjs-ver.gif" />
<figcaption></figcaption>
</figure>
<figure class="process-balsa" style="margin-top:30px; margin-left:60px;">
<img class="fit-height" style="height:130px;" src="images/pif/balsa_cross-hatched.gif" data-alt-src="images/pif/balsa_cross-hatched.gif" />
<figcaption></figcaption>
</figure>
<figure class="process-balsa" style="margin-top:30px; margin-left:30px;">
<img class="fit-height" style="height:130px;" src="images/pif/balsa-paperjs-singe.gif" data-alt-src="images/pif/balsa_cross-hatched.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-27" class="preview-page">
<div class="titre-courant">Public – Rencontres</div>
</div>
<div id="page-28" class="preview-page">
<div class="titre-courant">Informations pratiques</div>
</div>
<div id="page-29" class="preview-page">
<div class="titre-courant">Informations pratiques</div>
<div class="moveable" style="top: 53px; left: 59px; width: 345px; height: 231px;">
<img class="fit-width" style="" src="mockups/paperjs-rice-ants.gif" />
</div>
<div class="moveable" style="top: 114px; left: 517px; width: 355px; height: 233px;">
<img class="fit-width" style="margin-top:-30px;" src="mockups/paper.js-03.png" />
</div>
</div>
<div id="page-30" class="preview-page">
<div class="titre-courant">Informations pratiques</div>
</div>
<div id="page-31" class="preview-page">
<div class="titre-courant">Équipe – Colophon</div>
<div class="moveable" style="top: 53px; left: 59px; width: 390px; height: 274px;z-index:-1000;">
<img class="fit-width" style="" src="mockups/fond-chant-V-hatched2.png" />
</div>
<div class="moveable" style="top: 115px; left: 476px; width: 390px; height: 200px;z-index:-1000;">
<img class="fit-width" style="margin-top:-50px;" src="mockups/crisscross_canards.png" />
</div>
<div class="moveable" style="top: 786px; left: 539px; width: 70px; height: 457px;">
<figure class="limace">
<img class="fit-width" style="" src="images/images-programme/limace2.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
<div id="page-32" class="preview-page">
<div class="titre-courant">Making of</div>
<div class="moveable" style="top: 813px; left: 454px; width: 361px; height: 331px;">
<img class="fit-width" style="margin-left:0px; width: 100%;" src="images/images-programme/Uexkull_planche.png" />
</div>
<div class="moveable" style="top: 500px; left: 126px; width: 250px; height: 270px;">
<figure class="grenouille">
<img class="fit-width" style="margin-left:0px; width: 60%;" src="images/images-programme/grenouille.gif" />
<figcaption></figcaption>
</figure>
</div>
</div>
</div>
<div id="interface">
<button id="debug" class="button">Debug</button>
<button id="spread" class="button">Spread</button>
<button id="hi-res" class="button">Hi-res</button>
<button id="back2front" class="button">Back2Front</button>
<div id="toc">
<button id="goto" class="button">Go to</button>
<ul id="toc-pages"></ul>
</div>
</div>
<section id="container">
<!-- Content will be loaded here with Jquery. -->
</section>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="lib/popelt-v1.0.min.js"></script>
<script type="text/javascript" src="lib/less-1.3.0.min.js"></script>
<script type="text/javascript" src="lib/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="print.js"></script>
</body>
</html>