Make event details more robust

This is not going to cut it.

2 files changed, 187 insertions, 14 deletions

diff --git a/actualités.css b/actualités.css
index a5f686c..3cc5ff5 100644
--- a/actualités.css
+++ b/actualités.css
@@ -1,10 +1,14 @@
+main {
+    padding-left: 5%;
+}
+
 .events {
     display: grid;
-    width: 60vw;
-    grid-auto-rows: 14vw;
+    width: 58vw;
+    grid-auto-rows: 12vw;
     grid-template-columns: repeat(auto-fit, 14vw);
     grid-gap: 1em;
-    background-color: #ccc;
+    background-color: #dbb;
 }
 
 .event {
@@ -58,4 +62,8 @@
     position: fixed;
     top: 10em;
     left: 60vw;
+    max-width: 30%;
+    max-height: 50vh;
+    overflow: auto;
+    background-color: #d88;
 }
diff --git a/actualités.html b/actualités.html
index 5524640..53d322a 100644
--- a/actualités.html
+++ b/actualités.html
@@ -38,66 +38,231 @@
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #0 !<br>Plein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 100¤</p>
+          </div>
         </div>
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #1 !<br>Pleein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 101¤</p>
+          </div>
         </div>
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #2 !<br>Pleeein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 102¤</p>
+          </div>
         </div>
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #3 !<br>Pleeeein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 103¤</p>
+          </div>
         </div>
       </div>
 
-      <h1>Prochains concerts</h1>
+      <h1>Concerts passés</h1>
 
       <div class="events">
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #4 !<br>Pleeeeein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 104¤</p>
+          </div>
         </div>
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #5 !<br>Pleeeeeein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 105¤</p>
+          </div>
         </div>
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #6 !<br>Pleeeeeeein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 106¤</p>
+          </div>
         </div>
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #7 !<br>Pleeeeeeeein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 107¤</p>
+          </div>
         </div>
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #8 !<br>Pleeeeeeeeein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 108¤</p>
+          </div>
         </div>
         <div class="event">
           <input type="radio" name="event">
           <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
           <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">Des détails #9 !<br>Pleeeeeeeeeein de détails.</div>
+          <div class="details">
+            <h2>Programme</h2>
+            <ol>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+              <li>Un morceau</li>
+            </ol>
+            <h2>Salle</h2>
+            42 Place de l'Endroit
+            01337 La-Ville-du-Coin
+            <h2>Programmation</h2>
+            <p><a href="http://perdu.com">Site du programmateur</a></p>
+            <p>Réservable sous conditions.</p>
+            <p>1 place : 109¤</p>
+          </div>
         </div>
       </div>