<!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>Liste d'article</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.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 href="#" class="photo"></a>
<input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" value="Présidentielles Sarkozy Hollande" />
<input type="submit" title="Rechercher" value="" class="recherche-submit"/>
<a class="plus-button" title="Annoter" href="#"> </a>
</p>
</form>
</div>
<ul class="header-menu">
<li><a title="accueil" class="home" href="#"></a></li>
<li><a href="#">INTERNATIONAL</a></li>
<li><a href="#">FRANCE</a></li>
<li><a href="#">ECONOMIE</a></li>
<li><a href="#">CULTURE</a></li>
</ul>
<div class="login-wrap">
<h2>SE CONNECTER</h2>
<form action="#">
<p><input type="text" name="identifiant" placeholder="Identifiant" /></p>
<p class="submit-wrap">
<input class="password" type="password" name="password"/>
<input class="submit-button" type="submit" value="OK" />
</p>
</form>
<p class="password-lost"><a href="">Mot de passe oublié ?</a> </p>
</div>
<a 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 title="Voir le dossier" 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 title="Voir le dossier" 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 title="Voir le dossier" 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 title="Nouveau dossier documentaire" 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 class="documentaire-lien" title="Voir les dossiers" href="#"></a>
<h2></h2>
<ul>
<li class="clearfix">
<atitle="Voir le dossier" 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 title="Voir le dossier" 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" title="Voir les dossiers" 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 class="selected" href="#" title="Afficher le cluster" data-cluster-id="0">PS</a></li>
<li><a class="" href="#" title="Afficher le cluster" data-cluster-id="1">élections régionales</a></li>
<li><a class="" href="#" title="Afficher le cluster" data-cluster-id="2">gouvernement UMP</a></li>
<li><a href="#" title="Afficher le cluster" data-cluster-id="9">etc.</a></li>
<li><a href="#" title="Afficher le cluster" data-cluster-id="3">affaire de Karachi</a></li>
<li><a class="" href="#" title="Afficher le cluster" data-cluster-id="4">campagne des européennes</a></li>
<li><a href="#" title="Afficher le cluster" data-cluster-id="5">UMP</a></li>
<li><a href="#" title="Afficher le cluster" data-cluster-id="6">livre</a></li>
<li><a href="#" title="Afficher le cluster" data-cluster-id="7">Nouveau Centre Modem</a></li>
<li><a href="#" title="Afficher le cluster" data-cluster-id="8">panique financière</a></li>
</ul>
</div>
</div>
</div>
<div class="content clearfix">
<div class="content-left">
<h2>PS »</h2>
<div class="widget-wrapper">
<div class="widget-wrap">
<div class="widget recherche">
<h3><a href="#">RECHERCHE</a></h3>
<div class="widget-inner">
<form action="#" method="">
<p class="clearfix">
<input type="text" name="" placeholder="Rechercher" />
<input type="submit" title="Rechercher" value="" />
</p>
</form>
</div>
</div><!-- recherche -->
<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 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" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
<li><a title="Passer en vue Liste" class="liste active" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
</ul>
</div>
</div><!-- affichage -->
</div><!-- widget-wrap -->
</div>
</div>
<div class="content-right">
<div class="articles">
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="http://www.mediapart.fr/journal/france/080609/francois-rebsamen-quand-n-pas-de-leader-pas-de-strategie-et-pas-d-organisation">François Rebsamen: «Quand on n’a pas de leader, pas de stratégie et pas d’organisation, il ne reste plus que le travail» »</a></h2>
<p class="author">
<a href="#">08 juin 2009</a><br/>
by <a href="#">Stéphane Alliès</a>
</p>
<div class="article-content">
<p class="resume">
Proche de Ségolène Royal, François Rebsamen a un temps envisagé de faire le trait-d'union avec les amis de François Hollande pour renverser Martine Aubry de la direction du PS.
</p>
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#">Ségolène Royal veut rester sur le côté des polémiques socialistes »</a></h2>
<p class="author">
<a href="#">22 juillet 2009</a><br/>
by <a href="#">Stéphane Alliès</a>
</p>
<div class="article-content">
<p class="resume">
L'échange épistolaire entre Martine Aubry et Manuel Valls a ouvert la compétition des égos au PS. Mais la présidente de la région Poitou-Charentes affiche ses distances avec ces polémiques.
</p>
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#">Face aux députés PS, Martine Aubry soigne sa gauche »</a></h2>
<p class="author">
<a href="#">02 décembre 2008</a><br/>
by <a href="#">Mathilde Mathieu</a>
</p>
<div class="article-content">
<p class="resume">
Mardi 2 décembre, dans un sous-sol de l'Assemblée nationale, Martine Aubry a délivré une feuille de route toute fraîche aux députés socialistes. «On redémarre, on est en marche», a déclaré la première secrétaire du PS, pressé de marquer le nouvel «ancrage à gauche» du parti.
</p>
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2><a title="Lire l'article" href="#">Razzy Hammadi: «La sincérité du scrutin est mise en cause» »</a></h2>
<p class="author">
<a href="#">25 octobre 2008</a><br/>
by <a href="#">Stéphane Alliès</a>
</p>
<div class="article-content">
<p class="resume">
Les débats s'enchaînent au PS, sans que les équilibres internes ne paraissent évoluer. L'incertitude persiste, aucune des trois motions favorites (Royal, Aubry, Delanoë) n'émerge, et nombreux sont ceux qui craignent un démobilisation militante.
</p>
</div>
</div>
</div><!--article -->
</div><!-- articles -->
</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/main.js"></script>
<script src="js/streamgraph.js"></script>
</body>
</html>