<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/home.css" />
<link rel="stylesheet" href="css/article.css" />
<link rel="stylesheet" href="css/ui-red/jquery-ui.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo">
<div class="date">
<span class="year">5</span>
<span class="text">années archivées</span>
</div>
</div>
<div class="recherche-wrap">
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
<p >
<a data-trace-id="" data-trace-type="search" data-trace-view="head-search-snap" href="#" class="photo"></a>
<input data-trace-id="" data-trace-type="search" data-trace-view="head-search-query" name="recherche" placeholder="Rechercher" class="input-recherche" type="text" value="Présidentielles Sarkozy Hollande" />
<input data-trace-id="" data-trace-type="search" data-trace-view="head-search-submit" type="submit" value="" class="recherche-submit"/>
<a class="plus-button home" title="Annoter" href="#"> </a>
</p>
</form>
</div>
<ul class="header-menu">
<li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-home" title="accueil" class="home" href="#"></a></li>
<li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-international" href="#">INTERNATIONAL</a></li>
<li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-france" href="#">FRANCE</a></li>
<li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-economie" href="#">ECONOMIE</a></li>
<li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-culture" href="#">CULTURE</a></li>
</ul>
<div class="login-wrap">
<h2>SE CONNECTER</h2>
<form action="#">
<p><input data-trace-id="" data-trace-type="login" data-trace-view="login-login" type="text" name="identifiant" placeholder="Identifiant" /></p>
<p class="submit-wrap">
<input data-trace-id="" data-trace-type="login" data-trace-view="login-password" class="password" type="password" name="password"/>
<input data-trace-id="" data-trace-type="login" data-trace-view="login-submit" class="submit-button" type="submit" value="OK" />
</p>
</form>
<p class="password-lost"><a data-trace-id="" data-trace-type="login" data-trace-view="login-password-lost" href="">Mot de passe oublié ?</a> </p>
</div>
<a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="open-dossiers-documentaires" href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
<div class="dossier-documentaire">
<div class="dossier-documentaire-inner">
<h2>MES DOSSIERS</h2>
<ul>
<li class="clearfix">
<a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="link-dossiers-documentaires" data-trace-weight="1" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
<p>relation entre elation entre</p>
</span>
</a>
</li>
<li class="clearfix">
<a href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
<p>relation entre elation entre</p>
</span>
</a>
</li>
<li class="clearfix">
<a href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
<p>relation entre elation entre</p>
</span>
</a>
</li>
<li class="clearfix">
<a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="new-dossiers-documentaires" data-trace-weight="1" href="#">
<img src="img/documentaire-nouveau-dossier.jpg" alt="" />
<span class="documentaire-texte">
<h3>NOUVEAU DOSSIER</h3>
<p>Creér un dossier documentaire</p>
</span>
</a>
</li>
</ul>
<a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="more-dossiers-documentaires" data-trace-weight="1" class="documentaire-lien" href="#"></a>
<h2></h2>
<ul>
<li class="clearfix">
<a href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
<p>relation entre elation entre</p>
</span>
</a>
</li>
<li class="clearfix">
<a href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
<p>relation entre elation entre</p>
</span>
</a>
</li>
</ul>
<a class="documentaire-lien" href="#"></a>
</div>
</div><!--dossier-documentaire-->
</div><!-- header -->
<div class="content-wrap clearfix">
<div class="frise">
<div class="streamgraph"></div>
<div id="slider-range"></div>
</div><!-- frise -->
<div class="cluster-wrap">
<a href="#" class="cluster-arrow arrow-left"></a>
<a href="#" class="cluster-arrow arrow-right"></a>
<div class="cluster-containment">
<div class="cluster-visible">
<ul class="cluster">
<li><a title="Afficher le cluster" href="#">Début</a></li>
<li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
<li><a title="Afficher le cluster" href="#">Syrie</a></li>
<li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
<li><a title="Afficher le cluster" href="#">Syrie</a></li>
<li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
<li><a title="Afficher le cluster" href="#">Syrie</a></li>
<li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
<li><a title="Afficher le cluster" href="#">Syrie</a></li>
<li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
<li><a title="Afficher le cluster" href="#">Syrie</a></li>
<li><a title="Afficher le cluster" href="#">Fin</a></li>
</ul>
</div>
</div>
</div>
<div class="content clearfix">
<div class="content-left">
<div class="widget-wrapper">
<div class="widget-wrap">
<div class="widget affichage">
<h3><a href="#">AFFICHAGE</a></h3>
<div class="widget-inner">
<ul class="clearfix">
<li><a title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
<li><a title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
</ul>
</div>
</div><!-- affichage -->
<div class="widget filtre">
<h3><a href="#">FILTRES</a></h3>
<div class="widget-inner">
<form action="#" class="filtre-date">
<p>
<label for="">De :</label>
<input type="text" name="dateBegin" class="dateBegin" />
</p>
<p>
<label for="">à :</label>
<input type="text" name="dateEnd" class="dateEnd" />
</p>
</form>
<h4>Catégories :</h4>
<form action="#" class="filtre-categorie">
<p><input type="checkbox" checked> <label for="">International</label> </p>
<p><input type="checkbox" checked> <label for="">France</label> </p>
<p><input type="checkbox" checked> <label for="">Economie</label> </p>
<p><input type="checkbox" checked> <label for="">Culture</label> </p>
</form>
</div>
</div><!-- filtre -->
<div class="widget links">
<h3><a href="#">DOSSIERS ASSOCIES</a></h3>
<div class="widget-inner">
<ul>
<!-- <li><a href="#">« Corruption »</a></li>
<li><a href="#">« Corruption »</a></li>
<li><a href="#">« Corruption »</a></li>
<li><a href="#">« Corruption »</a></li> -->
</ul>
</div>
</div><!-- links -->
</div>
</div>
</div>
<div class="content-right">
<div id="treemap">
<div id="actus" class="actus">
</div> <!-- actus -->
</div>
<div id="liste">
<div class="articles">
<div class="tooltip"></div>
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="number-article">
<a href="#">48 articles | 320 annotations </a>
<a title="ajouter une annotation" class="add-annotation" href="#"></a>
</p>
<div class="article-annotations">
<a title="48 annotations" class="blue" href="#" style="width:20%;"></a>
<a title="title" class="green" href="#" style="width:20%;"></a>
<a title="title" class="red" href="#" style="width:40%;"></a>
<a title="title" class="empty" href="#" style="width:20%;"></a>
</div>
<div class="article-content">
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
<ul class="links">
<ul>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
</ul>
</ul>
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="number-article">
<a href="#">48 articles | 320 annotations </a>
<a title="ajouter une annotation" class="add-annotation" href="#"></a>
</p>
<div class="article-annotations">
<a title="title" class="blue" href="#" style="width:20%;"></a>
<a title="title" class="green" href="#" style="width:20%;"></a>
<a title="title" class="red" href="#" style="width:40%;"></a>
<a title="title" class="empty" href="#" style="width:20%;"></a>
</div>
<div class="article-content">
<div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<ul class="links">
<ul>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
</ul>
</ul>
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="number-article">
<a href="#">48 articles | 320 annotations </a>
<a title="ajouter une annotation" class="add-annotation" href="#"></a>
</p>
<div class="article-annotations">
<a title="title" class="blue" href="#" style="width:20%;"></a>
<a title="title" class="green" href="#" style="width:20%;"></a>
<a title="title" class="red" href="#" style="width:40%;"></a>
<a title="title" class="empty" href="#" style="width:20%;"></a>
</div>
<div class="article-content">
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
<ul class="links">
<ul>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
</ul>
</ul>
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="number-article">
<a href="#">48 articles | 320 annotations </a>
<a title="ajouter une annotation" class="add-annotation" href="#"></a>
</p>
<div class="article-annotations">
<a title="title" class="blue" href="#" style="width:20%;"></a>
<a title="title" class="green" href="#" style="width:20%;"></a>
<a title="title" class="red" href="#" style="width:40%;"></a>
<a title="title" class="empty" href="#" style="width:20%;"></a>
</div>
<div class="article-content">
<div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<ul class="links">
<ul>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
</ul>
</ul>
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="number-article">
<a href="#">48 articles | 320 annotations </a>
<a title="ajouter une annotation" class="add-annotation" href="#"></a>
</p>
<div class="article-annotations">
<a title="title" class="blue" href="#" style="width:20%;"></a>
<a title="title" class="green" href="#" style="width:20%;"></a>
<a title="title" class="red" href="#" style="width:40%;"></a>
<a title="title" class="empty" href="#" style="width:20%;"></a>
</div>
<div class="article-content">
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
<ul class="links">
<ul>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
</ul>
</ul>
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="number-article">
<a href="#">48 articles | 320 annotations </a>
<a title="ajouter une annotation" class="add-annotation" href="#"></a>
</p>
<div class="article-annotations">
<a title="title" class="blue" href="#" style="width:20%;"></a>
<a title="title" class="green" href="#" style="width:20%;"></a>
<a title="title" class="red" href="#" style="width:40%;"></a>
<a title="title" class="empty" href="#" style="width:20%;"></a>
</div>
<div class="article-content">
<div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
<p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<ul class="links">
<ul>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
<li><a href="#">Karachi crise</a></li>
</ul>
</ul>
</div>
</div>
</div><!--article -->
</div><!-- articles -->
<div class="pagination">
<a href="#" class="active">1</a>.<a href="#">2</a>.<a href="#">3</a>.<a href="#">Suivants »</a>
</div>
</div><!-- liste -->
</div><!-- content-right -->
</div>
<div class="footer clearfix">
<div class="footer-information">
<h2>Information utiles</h2>
<ul>
<li>- <a href="#">Mentions légales</a></li>
<li>- <a href="#">Mentions légales</a></li>
<li>- <a href="#">Conditions d'utilisations générale</a></li>
<li>- <a href="#">Le projet Periplus</a></li>
</ul>
</div>
<div class="footer-raccourci">
<h2>Raccourcis</h2>
<ul>
<li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
<li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
<li>- <a href="#">Conditions d'utilisations générale</a>
</ul>
</div>
<div class="footer-partenaire">
<h2>Partenaires</h2>
<ul>
<li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
<li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
<li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
</ul>
</div>
<div class="footer-texte">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.
</p>
</div>
</div><!-- footer -->
</div><!-- content-wrap -->
<div class="copyright">
© Mediapart © Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
</div>
</div>
<!-- JavaScript -->
<script src="js/vendor/jquery-1.8.0.min.js"></script>
<script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
<script src="js/vendor/dragslider.js"></script>
<script src="js/lib/raphael-min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/treemap.js"></script>
<script src="js/main.js"></script>
<script src="js/streamgraph.js"></script>
</body>
</html>