diff --git a/site/crapaud-fou.css b/site/crapaud-fou.css
index 627783e..6b2175a 100644
--- a/site/crapaud-fou.css
+++ b/site/crapaud-fou.css
@@ -1,12 +1,15 @@
 .header {
   background-color: #28a745;
-  padding-left: 5em;
   font-size: .9em;
+  position: relative;
 }
 .header img {
+  margin-right: 1em;
+}
+.header img:hover {
   position: absolute;
-  top: .1em;
-  left: .1em;
+  height: 400px;
+  z-index: 999;
 }
 .entete {
   background-color: rgb(33, 36, 32);
diff --git a/site/index.html b/site/index.html
index 1e324b0..5b8e50e 100644
--- a/site/index.html
+++ b/site/index.html
@@ -35,10 +35,10 @@
 
 <body>
   <div class="container-fluid p-0 header">
-    <img src="images/crapovecto_small.svg" height="90" class="float-left" />
     <div class="container">
       <div class="row pt-2 pb-2">
-        <div class="col">
+        <div class="col-12">
+        <img src="images/crapovecto_small.svg" height="64" class="float-left" />
           La mare des crapauds fous est un lieu de rencontre et de collaboration sur des sujets divers comme: écologie réelle, neurodiversité, éducation alternative, dégafamisation, logiciel libre, végétalisation urbaine, intelligence collective, parentalité responsable, monnaies libres, gouvernances partagées, open hardware, lutte contre l'obsolecense, permaculture, santé raisonnée, inclusion sociale, et beaucoup d'autres sujets.
         </div>
       </div>
@@ -49,12 +49,12 @@
     <div class="container">
 
       <div class="row">
-        <div class="col">
+        <div class="col-12 col-md-8 col-lg-4">
           <h2 class="card-title mt-0">Les crapauds fous</h4>
           <p>Face aux dangers qui pèsent sur notre avenir, seul un grain de folie peut nous sortir de l'ornière (et de la déprime passive).</p>
           <p>En avril 2017, une trentaine de personnes se reunissent aux Treilles et donnent naissance au manifeste des Crapauds Fous.</p>
         </div>
-        <div class="col">
+        <div class="col-12 col-md-4 col-lg-3">
           <h2>&nbsp;</h2>
           <ul>
             <li><a href="">Le manifeste</a></li>
@@ -64,7 +64,7 @@
             <li><a href="">Le manifeste en librairie</a></li>
           </ul>
         </div>
-        <div class="col align-middle">
+        <div class="col-12 col-lg-5 align-middle">
           <iframe width="420" height="240" sandbox="allow-same-origin allow-scripts" src="https://thinkerview.video/videos/embed/5417c4b5-38ce-4e69-bbc7-19335ade44e4" frameborder="0" allowfullscreen></iframe>
         </div>
       </div>
@@ -75,7 +75,7 @@
   <div class="container">
 
     <div class="row">
-      <div class="col-4">
+      <div class="col-12 col-md-6 col-lg-4">
         <div class="card idees">
           <div class="card-body">
             <div class="link">
@@ -119,7 +119,7 @@
         </div>
       </div>
 
-      <div class="col">
+      <div class="col-12 col-md-6 col-lg-4">
         <div class="card chat">
           <div class="card-body">
             <div class="link">
@@ -161,7 +161,7 @@
         </div>
       </div>
 
-      <div class="col">
+      <div class="col-12 col-md-6 col-lg-4">
         <div class="card wiki">
           <div class="card-body">
             <div class="link">
@@ -211,10 +211,8 @@
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="row mt-4">
-      <div class="col">
+      <div class="col-12 col-md-6 col-lg-4">
         <div class="card">
           <img src="images/cohortes.jpg" class="card-img-top" alt="">
           <div class="card-body">
@@ -225,7 +223,7 @@
           </div>
         </div>
       </div>
-      <div class="col">
+      <div class="col-12 col-md-6 col-lg-4">
         <div class="card">
           <img src="images/rencontres.jpg" class="card-img-top" alt="Rencontre des Treilles, avril 2017">
           <div class="card-body">
@@ -234,7 +232,7 @@
           </div>
         </div>
       </div>
-      <div class="col">
+      <div class="col-12 col-md-6 col-lg-4">
         <h4>Cratube</h4>
       </div>
     </div>
