<!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>Title</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="recherche-wrap">
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
<p >
<input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
<input type="submit" value="" class="recherche-submit"/>
<a class="plus-button" href="#"><img src="img/plus-button.jpg" alt=""/> </a>
</p>
</form>
</div>
<ul class="header-menu">
<li><a href="#"><img src="img/home-button.jpg" alt="" /> </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>
<li><a href="#">CLUSTER X</a></li>
</ul>
<div class="login-wrap">
<h2>CONNECTER VOUS</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><!-- header -->
<div class="content-wrap clearfix">
<div class="frise">
</div>
<div class="cluster-wrap">
<a href="#" class="cluster-arrow arrow-left"></a>
<a href="#" class="cluster-arrow arrow-right"></a>
<div class="cluster-visible">
<ul class="cluster">
<li><a href="#">Syrie</a></li>
<li><a href="#">affaire de Karachi</a></li>
<li><a href="#">Syrie</a></li>
<li><a href="#">affaire de Karachi</a></li>
<li><a href="#">Syrie</a></li>
<li><a href="#">affaire de Karachi</a></li>
<li><a href="#">Syrie</a></li>
<li><a href="#">affaire de Karachi</a></li>
<li><a href="#">Syrie</a></li>
<li><a href="#">affaire de Karachi</a></li>
<li><a href="#">Syrie</a></li>
<li><a href="#">affaire de Karachi</a></li>
</ul>
</div>
</div>
<div class="content clearfix">
<div class="content-left">
<h2> Affaire Bettencourt »</h2>
<div class="widget-wrap">
<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" />
</p>
<p>
<label for="">à :</label>
<input type="text" />
</p>
</form>
<h4>Catégories :</h4>
<form action="#" class="filtre-categorie">
<p><input type="checkbox"> <label for="">International</label> </p>
<p><input type="checkbox"> <label for="">International</label> </p>
<p><input type="checkbox"> <label for="">International</label> </p>
</form>
</div>
</div>
<div class="widget links">
<h3><a href="">DOSSIER 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>
</div>
</div>
<div class="content-right">
<div class="articles">
<div class="article">
<div class="inner-article clearfix">
<h2>Affaire Lorem »</h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
</p>
<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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</p>
<img class="article-visuel" src="img/visuel-article.jpg" alt="" />
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2>Affaire Lorem »</h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
</p>
<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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</p>
<img class="article-visuel" src="img/visuel-article.jpg" alt="" />
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2>Affaire Lorem »</h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
</p>
<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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</p>
<img class="article-visuel" src="img/visuel-article.jpg" alt="" />
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2>Affaire Lorem »</h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
</p>
<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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</p>
<img class="article-visuel" src="img/visuel-article.jpg" alt="" />
</div>
</div>
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
<h2>Affaire Lorem »</h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
</p>
<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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</p>
<img class="article-visuel" src="img/visuel-article.jpg" alt="" />
</div>
</div>
</div><!--article -->
</div><!-- articles -->
</div>
</div>
<div class="footer">
<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><!-- footer -->
</div><!-- content-wrap -->
<div class="copyright">
© Mediapart © Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale</a>
</div>
</div>
<!-- JavaScript -->
<script src="js/vendor/jquery-1.8.0.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>