push

application/controllers/Artistes.php

@@ -3,13 +3,13 @@ defined('BASEPATH') OR exit('No direct script access allowed');
 
 class Artistes extends CI_Controller {
 
-    public function __construct(){
+    public function __construct() {
         parent::__construct();
         $this->load->model('model_music');
         $this->load->library('session');
     }
 
-    public function index(){
+    public function index() {
         $genre = $this->input->get('genre');
         $order = $this->input->get('order');
         $query = $this->input->get('query');
@@ -31,20 +31,19 @@ class Artistes extends CI_Controller {
     }
 
     public function view($artistId) {
-		$artistData = $this->model_music->getArtistDetails($artistId);
-	
-		$is_logged_in = $this->session->userdata('logged_in');
-		$data = array(
-			'artist' => $artistData['artist'],
-			'albums' => $artistData['albums'],
-			'is_logged_in' => $is_logged_in
-		);
-	
-		$this->load->view('layout/header', $data);
-		$this->load->view('artist_details', $data);
-		$this->load->view('layout/footer');
-	}
-	
+        $artist = $this->model_music->getArtistDetails($artistId);
+        $albums = $this->model_music->getAlbumsByArtist($artistId);
+
+        $is_logged_in = $this->session->userdata('logged_in');
+        $data = array(
+            'artist' => $artist,
+            'albums' => $albums,
+            'is_logged_in' => $is_logged_in
+        );
+
+        $this->load->view('layout/header', $data);
+        $this->load->view('artist_details', $data);
+        $this->load->view('layout/footer');
+    }
 }
-
-
+?>

application/controllers/Music.php

@@ -17,13 +17,13 @@ class Music extends CI_Controller {
 
         $musics = $this->model_music->getMusics($genre, $order, $artist, $query);
         $genres = $this->model_music->researchtype();
-        $artists = $this->model_music->nameArtist();
+        $artists = $this->model_music->nameArtist(); // S'assurer que cette méthode récupère bien les artistes
 
         $is_logged_in = $this->session->userdata('logged_in');
         $data = array(
             'musics' => $musics,
             'genres' => $genres,
-            'artists' => $artists,
+            'artistes' => $artists, // Passer les artistes à la vue
             'is_logged_in' => $is_logged_in
         );
 
@@ -33,17 +33,23 @@ class Music extends CI_Controller {
         $this->load->view('layout/footer');
     }
 
-    public function view($trackId) {
-        $songData = $this->model_music->getSongDetails($trackId);
-
+    public function view($songId) {
+        $songData = $this->model_music->getSongDetails($songId);
+    
+        if (!$songData) {
+            show_404();
+        }
+    
         $is_logged_in = $this->session->userdata('logged_in');
         $data = array(
             'song' => $songData,
             'is_logged_in' => $is_logged_in
         );
-
+    
         $this->load->view('layout/header', $data);
         $this->load->view('song_details', $data);
         $this->load->view('layout/footer');
     }
+    
+    
 }

application/controllers/Playlist.php

@@ -0,0 +1,151 @@
+<?php
+defined('BASEPATH') OR exit('No direct script access allowed');
+
+class Playlist extends CI_Controller {
+    public function __construct() {
+        parent::__construct();
+        $this->load->model('Model_playlist');
+        $this->load->model('Model_music'); // Ajouté pour accéder aux musiques
+        $this->load->library('session');
+    }
+
+    public function index() {
+        $is_logged_in = $this->session->userdata('logged_in');
+        $user_email = $this->session->userdata('email');
+
+        if (!$is_logged_in) {
+            redirect('connect/login');
+        }
+
+        $data = array(
+            'is_logged_in' => $is_logged_in,
+            'playlists' => $this->Model_playlist->getPlaylistsByUser($user_email)
+        );
+
+        $this->load->view('layout/header', $data);
+        $this->load->view('playlists_list', $data);
+        $this->load->view('layout/footer');
+    }
+
+    public function add() {
+        $is_logged_in = $this->session->userdata('logged_in');
+        $user_email = $this->session->userdata('email');
+
+        if (!$is_logged_in) {
+            redirect('connect/login');
+        }
+
+        $name = $this->input->post('name');
+        $type = $this->input->post('type');
+
+        if ($type == 'random') {
+            $numSongs = $this->input->post('numSongs');
+            $artist = $this->input->post('artist');
+            $genre = $this->input->post('genre');
+            $this->Model_playlist->createRandomPlaylist($user_email, $name, $numSongs, $artist, $genre);
+        } else {
+            $this->Model_playlist->addPlaylist($user_email, $name);
+        }
+
+        redirect('playlist');
+    }
+
+    public function selectPlaylist() {
+        $itemId = $this->input->post('itemId');
+        $itemType = $this->input->post('itemType');
+        $playlists = $this->Model_playlist->getPlaylistsByUser($this->session->userdata('email'));
+
+        $data = array(
+            'itemId' => $itemId,
+            'itemType' => $itemType,
+            'playlists' => $playlists
+        );
+
+        $this->load->view('layout/header', $data);
+        $this->load->view('select_playlist', $data);
+        $this->load->view('layout/footer');
+    }
+
+    public function addItems() {
+        $playlistId = $this->input->post('playlistId');
+        $itemId = $this->input->post('itemId');
+        $itemType = $this->input->post('itemType');
+
+        if ($itemType == 'album') {
+            $songs = $this->Model_music->getSongsByAlbum($itemId);
+            foreach ($songs as $song) {
+                $this->Model_playlist->addItem($playlistId, $song->id, 'song');
+            }
+        } else if ($itemType == 'artist') {
+            $albums = $this->Model_music->getAlbumsByArtist($itemId);
+            foreach ($albums as $album) {
+                $songs = $this->Model_music->getSongsByAlbum($album->albumId);
+                foreach ($songs as $song) {
+                    $this->Model_playlist->addItem($playlistId, $song->id, 'song');
+                }
+            }
+        } else {
+            $this->Model_playlist->addItem($playlistId, $itemId, 'song');
+        }
+
+        redirect('playlist/view/' . $playlistId);
+    }
+
+    public function view($playlistId) {
+        $is_logged_in = $this->session->userdata('logged_in');
+        $items = $this->Model_playlist->getPlaylistItems($playlistId);
+        $data = array(
+            'is_logged_in' => $is_logged_in,
+            'items' => $items
+        );
+
+        $this->load->view('layout/header', $data);
+        $this->load->view('playlist_details', $data);
+        $this->load->view('layout/footer');
+    }
+
+    public function deleteItem($playlistId, $itemId) {
+        $this->Model_playlist->deleteItem($playlistId, $itemId);
+        redirect('playlist/view/' . $playlistId);
+    }
+
+    public function delete($playlist_id) {
+        $is_logged_in = $this->session->userdata('logged_in');
+        $user_email = $this->session->userdata('email');
+
+        if (!$is_logged_in) {
+            redirect('connect/login');
+        }
+
+        $this->Model_playlist->deletePlaylist($playlist_id);
+        redirect('playlist');
+    }
+
+    public function duplicate($playlist_id) {
+        $is_logged_in = $this->session->userdata('logged_in');
+        $user_email = $this->session->userdata('email');
+
+        if (!$is_logged_in) {
+            redirect('connect/login');
+        }
+
+        $this->Model_playlist->duplicatePlaylist($playlist_id, $user_email);
+        redirect('playlist');
+    }
+
+    public function rename() {
+        $is_logged_in = $this->session->userdata('logged_in');
+        $user_email = $this->session->userdata('email');
+
+        if (!$is_logged_in) {
+            redirect('connect/login');
+        }
+
+        $playlistId = $this->input->post('playlistId');
+        $newName = $this->input->post('newName');
+
+        $this->Model_playlist->renamePlaylist($playlistId, $newName);
+        redirect('playlist');
+    }
+}
+

application/models/Model_music.php

@@ -70,7 +70,6 @@ class Model_music extends CI_Model {
         $result = $this->db->get();
         return $result->result();
     }
-    
 
     public function getMusics($genre = '', $order = '', $artist = '', $query = '') {
         $this->db->select('album.name as albumName, album.id as albumId, year, artist.name as artistName, genre.name as genreName, jpeg, song.name as trackName, track.id as trackId');
@@ -81,29 +80,28 @@ class Model_music extends CI_Model {
         $this->db->join('genre', 'genre.id = album.genreid');
         $this->db->join('cover', 'cover.id = album.coverid');
         $this->db->limit(100);
-
+    
         if (!empty($genre)) {
             $this->db->where('genre.name', $genre);
         }
-
+    
         if (!empty($artist)) {
             $this->db->where('artist.name', $artist);
         }
-
+    
         if ($order == 'asc' || $order == 'desc') {
             $this->db->order_by('song.name', $order);
         }
-
+    
         if (!empty($query)) {
             $this->db->like('song.name', $query);
         }
-
+    
         $result = $this->db->get();
         return $result->result();
     }
 
     public function getAlbumDetails($albumId) {
-        // Get album info
         $this->db->select('album.name as albumName, album.id, year, artist.name as artistName, genre.name as genreName, jpeg');
         $this->db->from('album');
         $this->db->join('artist', 'album.artistid = artist.id');
@@ -113,7 +111,6 @@ class Model_music extends CI_Model {
         $albumQuery = $this->db->get();
         $albumDetails = $albumQuery->row();
     
-        // Get album songs
         $this->db->select('song.name as trackName, track.id as trackId');
         $this->db->from('track');
         $this->db->join('song', 'track.songId = song.id');
@@ -124,22 +121,15 @@ class Model_music extends CI_Model {
         return array('album' => $albumDetails, 'songs' => $songs);
     }
 
-    public function getArtistDetails($artistId) {
-        // Get artist info
-        $this->db->select('artist.name as artistName, artist.id');
-        $this->db->from('artist');
-        $this->db->where('artist.id', $artistId);
-        $artistQuery = $this->db->get();
-        $artistDetails = $artistQuery->row();
-    
-        // Get artist's albums with their songs
-        $this->db->select('album.id as albumId, album.name as albumName, album.year');
+    public function getAlbumsByArtist($artistId) {
+        $this->db->select('album.id as albumId, album.name as albumName, album.year, cover.jpeg, genre.name as genreName');
         $this->db->from('album');
+        $this->db->join('genre', 'album.genreid = genre.id');
+        $this->db->join('cover', 'album.coverid = cover.id');
         $this->db->where('album.artistid', $artistId);
         $albumsQuery = $this->db->get();
         $albums = $albumsQuery->result();
     
-        // Get songs for each album
         foreach ($albums as $album) {
             $this->db->select('track.id as trackId, song.name as songName');
             $this->db->from('track');
@@ -148,26 +138,88 @@ class Model_music extends CI_Model {
             $album->songs = $this->db->get()->result();
         }
     
-        return array('artist' => $artistDetails, 'albums' => $albums);
+        return $albums;
     }
-    
-    
+
+    public function getArtistDetails($artistId) {
+        $this->db->select('artist.name as artistName, artist.id');
+        $this->db->from('artist');
+        $this->db->where('artist.id', $artistId);
+        $artistQuery = $this->db->get();
+        return $artistQuery->row();
+    }
+
     public function getSongDetails($songId) {
-        $this->db->select('song.name as songName, song.id as songId, album.name as albumName, album.id as albumId, album.year, artist.name as artistName, artist.id as artistId, cover.jpeg');
+        $this->db->select('
+            song.name as songName, 
+            song.id as songId, 
+            album.name as albumName, 
+            album.id as albumId, 
+            album.year, 
+            artist.name as artistName, 
+            artist.id as artistId, 
+            cover.jpeg,
+            track.diskNumber, 
+            track.number, 
+            track.duration
+        ');
         $this->db->from('track');
-        $this->db->join('album', 'track.albumId = album.id');
-        $this->db->join('song', 'song.id = track.songId');
+        $this->db->join('album', 'track.albumid = album.id');
+        $this->db->join('song', 'song.id = track.songid');
         $this->db->join('artist', 'album.artistid = artist.id');
         $this->db->join('cover', 'cover.id = album.coverid');
         $this->db->where('track.id', $songId);
-
+    
         $result = $this->db->get();
         return $result->row_array();
     }
 
-    // Suppression de la deuxième méthode researchtype
+    public function getSongsByAlbum($albumId) {
+        $this->db->select('track.id');
+        $this->db->from('track');
+        $this->db->where('track.albumid', $albumId);
+        $query = $this->db->get();
+        return $query->result();
+    }
 
-    public function research(){
-        $result = $this->db->query();
+    public function getSongsByArtist($artistId) {
+        $this->db->select('track.id');
+        $this->db->from('track');
+        $this->db->join('album', 'track.albumid = album.id');
+        $this->db->where('album.artistid', $artistId);
+        $query = $this->db->get();
+        return $query->result();
+    }    
+    
+
+    public function getRandomSongs($numSongs, $artist = '', $genre = '') {
+        $this->db->select('track.id as trackId');
+        $this->db->from('track');
+        $this->db->join('album', 'track.albumid = album.id');
+        $this->db->join('song', 'song.id = track.songid');
+        $this->db->join('artist', 'album.artistid = artist.id');
+        $this->db->join('genre', 'album.genreid = genre.id');
+    
+        if (!empty($artist)) {
+            $this->db->where('artist.name', $artist);
+        }
+    
+        if (!empty($genre)) {
+            $this->db->where('genre.name', $genre);
+        }
+    
+        $this->db->order_by('RAND()');
+        $this->db->limit($numSongs);
+    
+        $query = $this->db->get();
+        return $query->result();
+    }
+    
+
+    public function getGenres() {
+        $this->db->select('id, name');
+        $this->db->from('genre');
+        $query = $this->db->get();
+        return $query->result();
     }
 }

application/models/Model_playlist.php

@@ -0,0 +1,98 @@
+<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
+
+class Model_playlist extends CI_Model {
+    public function __construct() {
+        $this->load->database();
+    }
+
+    public function getPlaylistsByUser($userEmail) {
+        $this->db->select('*');
+        $this->db->from('playlists');
+        $this->db->where('user_email', $userEmail);
+        $query = $this->db->get();
+        return $query->result();
+    }
+
+    public function addPlaylist($userEmail, $name) {
+        $data = array(
+            'user_email' => $userEmail,
+            'name' => $name
+        );
+        $this->db->insert('playlists', $data);
+        return $this->db->insert_id();
+    }
+
+    public function addItem($playlistId, $itemId, $itemType) {
+        $data = array(
+            'playlist_id' => $playlistId,
+            'item_id' => $itemId,
+            'item_type' => $itemType
+        );
+        return $this->db->insert('playlist_items', $data);
+    }
+
+    public function getPlaylistItems($playlistId) {
+        $this->db->select('playlist_items.item_id, song.name as songName, artist.name as artistName, album.name as albumName, playlist_items.playlist_id');
+        $this->db->from('playlist_items');
+        $this->db->join('track', 'track.id = playlist_items.item_id');
+        $this->db->join('song', 'song.id = track.songid');
+        $this->db->join('album', 'album.id = track.albumid');
+        $this->db->join('artist', 'artist.id = album.artistid');
+        $this->db->where('playlist_items.playlist_id', $playlistId);
+
+        $result = $this->db->get();
+        return $result->result();
+    }
+
+    public function deleteItem($playlistId, $itemId) {
+        $this->db->where('playlist_id', $playlistId);
+        $this->db->where('item_id', $itemId);
+        return $this->db->delete('playlist_items');
+    }
+
+    public function deletePlaylist($playlistId) {
+        $this->db->where('playlist_id', $playlistId);
+        $this->db->delete('playlist_items');
+
+        $this->db->where('id', $playlistId);
+        return $this->db->delete('playlists');
+    }
+
+    public function duplicatePlaylist($playlistId) {
+        $this->db->select('*');
+        $this->db->from('playlists');
+        $this->db->where('id', $playlistId);
+        $query = $this->db->get();
+        $playlist = $query->row();
+
+        if ($playlist) {
+            $newPlaylistData = array(
+                'user_email' => $playlist->user_email,
+                'name' => $playlist->name . ' (Copie)'
+            );
+            $this->db->insert('playlists', $newPlaylistData);
+            $newPlaylistId = $this->db->insert_id();
+
+            $this->db->select('*');
+            $this->db->from('playlist_items');
+            $this->db->where('playlist_id', $playlistId);
+            $query = $this->db->get();
+            $items = $query->result();
+
+            foreach ($items as $item) {
+                $newItemData = array(
+                    'playlist_id' => $newPlaylistId,
+                    'item_id' => $item->item_id,
+                    'item_type' => $item->item_type
+                );
+                $this->db->insert('playlist_items', $newItemData);
+            }
+        }
+    }
+
+    public function renamePlaylist($playlistId, $newName) {
+        $data = array('name' => $newName);
+        $this->db->where('id', $playlistId);
+        return $this->db->update('playlists', $data);
+    }
+}

application/views/album_details.php

@@ -1,31 +1,38 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title><?= $album->albumName ?> - Details</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
-</head>
 <body>
     <section class="section">
         <div class="container">
-            <h1 class="title"><?= $album->albumName ?></h1>
-            <div class="columns">
+            <div class="columns is-vcentered">
                 <div class="column is-one-third">
-                    <figure class="image">
+                    <figure class="image is-square">
                         <img src="data:image/jpeg;base64,<?= base64_encode($album->jpeg) ?>" alt="<?= $album->albumName ?> Cover">
                     </figure>
                 </div>
                 <div class="column">
-                    <p><strong>Artist:</strong> <?= $album->artistName ?></p>
+                    <h1 class="title"><?= $album->albumName ?></h1>
+                    <p><strong>Artiste:</strong> <?= $album->artistName ?></p>
                     <p><strong>Genre:</strong> <?= $album->genreName ?></p>
-                    <p><strong>Year:</strong> <?= $album->year ?></p>
+                    <p><strong>Année:</strong> <?= $album->year ?></p>
                 </div>
             </div>
-            <h2 class="title is-4">Songs</h2>
-            <ul>
-                <?php foreach ($songs as $song): ?>
-                    <li><?= anchor("music/view/{$song->trackId}", $song->trackName) ?></li>
-                <?php endforeach; ?>
-            </ul>
+            <h2 class="title is-4">Chansons</h2>
+            <div class="table-container">
+                <table class="table is-striped is-fullwidth">
+                    <thead>
+                        <tr>
+                            <th>Titre</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php foreach ($songs as $song): ?>
+                            <tr>
+                                <td><?= anchor("music/view/{$song->trackId}", $song->trackName) ?></td>
+                            </tr>
+                        <?php endforeach; ?>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </section>
 </body>

application/views/albums_list.php

@@ -1,24 +1,44 @@
-<h5 class="title is-5 has-text-white">Liste des Albums</h5>
-<section class="columns is-multiline">
-    <?php foreach($albums as $album): ?>
-        <div class="column is-one-quarter">
-            <div class="card">
-                <div class="card-image">
-                    <figure class="image is-4by3">
-                        <img src="data:image/jpeg;base64,<?= base64_encode($album->jpeg) ?>" alt="<?= $album->name ?>">
-                    </figure>
-                </div>
-                <div class="card-content">
-                    <div class="media">
-                        <div class="media-content">
-                            <p class="title is-4">
-                                <?= anchor("albums/view/{$album->id}", $album->name) ?>
-                            </p>
-                            <p class="subtitle is-6"><?= "{$album->year} - {$album->artistName}" ?></p>
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liste des Albums - Dix heures</title>
+    <link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
+</head>
+<body>
+    <section class="section">
+        <div class="container">
+            <h1 class="title is-4 has-text-dark">Liste des Albums</h1>
+            <div class="columns is-multiline is-centered">
+                <?php foreach ($albums as $album): ?>
+                    <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile">
+                        <div class="card">
+                            <div class="card-image">
+                                <figure class="image is-4by3">
+                                    <img src="data:image/jpeg;base64,<?= base64_encode($album->jpeg) ?>" alt="<?= $album->name ?>">
+                                </figure>
+                            </div>
+                            <div class="card-content">
+                                <div class="media">
+                                    <div class="media-content">
+                                        <p class="title is-4 album-title"><?= anchor("albums/view/{$album->id}", $album->name) ?></p>
+                                        <p class="subtitle is-6"><?= "{$album->year} - {$album->artistName}" ?></p>
+                                        <?php if (isset($is_logged_in) && $is_logged_in): ?>
+                                            <form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
+                                                <input type="hidden" name="itemId" value="<?= $album->id ?>">
+                                                <input type="hidden" name="itemType" value="album">
+                                                <button type="submit" class="button is-link is-fullwidth">Ajouter à la playlist</button>
+                                            </form>
+                                        <?php endif; ?>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
+                <?php endforeach; ?>
             </div>
         </div>
-    <?php endforeach; ?>
-</section>
+    </section>
+</body>
+</html>

application/views/artist_details.php

@@ -1,31 +1,36 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title><?= $album->albumName ?> - Details</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
-</head>
 <body>
     <section class="section">
         <div class="container">
-            <h1 class="title has-text-white"><?= $album->albumName ?></h1>
-            <div class="columns">
-                <div class="column is-one-third">
-                    <figure class="image is-square">
-                        <img src="data:image/jpeg;base64,<?= base64_encode($album->jpeg) ?>" alt="<?= $album->albumName ?> Cover">
-                    </figure>
-                </div>
-                <div class="column">
-                    <p><strong>Artist:</strong> <?= $album->artistName ?></p>
-                    <p><strong>Genre:</strong> <?= $album->genreName ?></p>
-                    <p><strong>Year:</strong> <?= $album->year ?></p>
-                </div>
-            </div>
-            <h2 class="title is-4 has-text-white">Songs</h2>
-            <ul>
-                <?php foreach ($songs as $song): ?>
-                    <li><?= anchor("music/view/{$song->trackId}", $song->trackName) ?></li>
+            <h1 class="title"><?= $artist->artistName ?></h1>
+            <h2 class="title is-4">Albums</h2>
+            <?php if ($albums): ?>
+                <?php foreach ($albums as $album): ?>
+                    <div class="box">
+                        <div class="columns">
+                            <div class="column is-one-third">
+                                <figure class="image">
+                                    <img src="data:image/jpeg;base64,<?= base64_encode($album->jpeg) ?>" alt="<?= $album->albumName ?> Cover">
+                                </figure>
+                            </div>
+                            <div class="column">
+                                <h3 class="title is-5"><?= $album->albumName ?></h3>
+                                <p><strong>Genre:</strong> <?= $album->genreName ?></p>
+                                <p><strong>Year:</strong> <?= $album->year ?></p>
+                                <h4 class="title is-6">Songs</h4>
+                                <ul>
+                                    <?php foreach ($album->songs as $song): ?>
+                                        <li><?= anchor("music/view/{$song->trackId}", $song->songName) ?></li>
+                                    <?php endforeach; ?>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
                 <?php endforeach; ?>
-            </ul>
+            <?php else: ?>
+                <p>No albums found for this artist.</p>
+            <?php endif; ?>
         </div>
     </section>
 </body>

application/views/artists_list.php

@@ -1,11 +1,27 @@
-<h5>Liste des Artistes</h5>
-<section class="list">
-<?php
-foreach($artists as $artist){
-        echo "<div><article>";
-        echo "<header class='short-text'>";
-        echo anchor("artistes/view/{$artist->artistId}","{$artist->artistName}");
-        echo "</header></article></div>";
-}
-?>
-</section>
+<section class="section">
+    <div class="container">
+        <h1 class="title is-4">Liste des Artistes</h1>
+        <div class="columns is-multiline">
+            <?php foreach ($artists as $artist): ?>
+                <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile">
+                    <div class="card artist-card">
+                        <div class="card-content">
+                            <div class="media">
+                                <div class="media-content">
+                                    <p class="title is-4 artist-title"><?= anchor("artistes/view/{$artist->artistId}", $artist->artistName) ?></p>
+                                    <?php if (isset($is_logged_in) && $is_logged_in): ?>
+                                        <form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
+                                            <input type="hidden" name="itemId" value="<?= $artist->artistId ?>">
+                                            <input type="hidden" name="itemType" value="artist">
+                                            <button type="submit" class="button is-link">Ajouter à la playlist</button>
+                                        </form>
+                                    <?php endif; ?>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            <?php endforeach; ?>
+        </div>
+    </div>
+</section>

application/views/create.php

@@ -1,32 +1,59 @@
-<?=validation_errors(); ?>
-<?=form_open('connect/create')?>
-  <!-- Grid -->
-  <div class="grid">
-
-    <label for="prenom">
-      Prénom
-      <input type="text" id="prenom" name="prenom" placeholder="Prénom" value="<?=set_value('prenom')?>" required>
-    </label>
-
-    <label for="nom">
-      Nom
-      <input type="text" id="nom" name="nom" placeholder="Nom" value="<?=set_value('nom')?>" required>
-    </label>
-  </div>
-
-  <label for="email">Adresse mail</label>
-  <input type="email" id="email" name="email" placeholder="Email" value="<?=set_value('email')?>" required>
-
-  <div class="grid">
-    <label for="password">Password
-      <input type="password" id="password" name="password" placeholder="Password" value="<?=set_value('password')?>" required>
-    </label>
-
-    <label for="cpassword">Confirmation password
-      <input type="password" id="cpassword" name="cpassword" placeholder="Confirmation Password" value="<?=set_value('cpassword')?>" required>
-    </label>
-  </div>
-
-  <!-- Button -->
-  <button type="submit">Submit</button>
-</form>
+<!doctype html>
+<html lang="en">
+<body>
+    <section class="hero is-fullheight">
+        <div class="hero-body">
+            <div class="container">
+                <div class="columns is-centered">
+                    <div class="column is-5">
+                        <div class="box">
+                            <h1 class="title is-1 has-text-centered">Inscription</h1>
+                            <?=validation_errors(); ?>
+                            <?=form_open('connect/create')?>
+                                <div class="field">
+                                    <label class="label" for="prenom">Prénom</label>
+                                    <div class="control">
+                                        <input class="input is-dark" type="text" id="prenom" name="prenom" placeholder="Prénom" value="<?=set_value('prenom')?>" required>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label class="label" for="nom">Nom</label>
+                                    <div class="control">
+                                        <input class="input is-dark" type="text" id="nom" name="nom" placeholder="Nom" value="<?=set_value('nom')?>" required>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label class="label" for="email">Adresse mail</label>
+                                    <div class="control">
+                                        <input class="input is-dark" type="email" id="email" name="email" placeholder="Email" value="<?=set_value('email')?>" required>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label class="label" for="password">Mot de passe</label>
+                                    <div class="control">
+                                        <input class="input is-dark" type="password" id="password" name="password" placeholder="Mot de passe" value="<?=set_value('password')?>" required>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label class="label" for="cpassword">Confirmation mot de passe</label>
+                                    <div class="control">
+                                        <input class="input is-dark" type="password" id="cpassword" name="cpassword" placeholder="Confirmation mot de passe" value="<?=set_value('cpassword')?>" required>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <div class="control">
+                                        <button class="button is-primary is-fullwidth is-large" type="submit">S'inscrire</button>
+                                    </div>
+                                </div>
+                                <div class="has-text-centered">
+                                    <p>Vous avez déjà un compte ? <a href="<?= site_url('connect/login') ?>" class="has-text-primary">Connexion</a></p>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</body>
+</html>

application/views/layout/getter.php

@@ -17,6 +17,7 @@
     <!-- Div contenant les filtres, cachée par défaut -->
     <div id="filters" style="display: none;">
         <form method="GET" action="">
+            <?php if ($this->uri->segment(1) != 'artistes'): ?>
             <!-- Filtre par artiste -->
             <div class="field">
                 <label class="label" for="artist">Artiste</label>
@@ -31,6 +32,7 @@
                     </div>
                 </div>
             </div>
+            <?php endif; ?>
 
             <!-- Filtre par genre -->
             <div class="field">

application/views/layout/header.php

@@ -1,58 +1,48 @@
 <!doctype html>
-<html lang="en" class="has-navbar-fixed-top">
+<html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <title>Dix heures</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= $title ?? 'Dix heures' ?></title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-    <?= link_tag('assets/style.css') ?>
-    <style>
-        body {
-            background-color: #121212;
-            color: #FFFFFF;
-        }
-        .navbar {
-            background-color: #000000;
-        }
-        .navbar-item {
-            color: white;
-        }
-        .hero {
-            background-color: #282828;
-            color: white;
-        }
-        .card {
-            background-color: #1e1e1e;
-            color: white;
-        }
-        .button, .input, .select {
-            background-color: #282828;
-            color: white;
-            border-color: #282828;
-        }
-        .button:hover, .input:hover, .select:hover {
-            background-color: #3b3b3b;
-            border-color: #3b3b3b;
-        }
-    </style>
+    <link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
 </head>
 <body>
     <nav class="navbar">
-        <div class="navbar-brand">
-            <a class="navbar-item" href="#">Dix heures</a>
-        </div>
-        <div class="navbar-menu">
-            <div class="navbar-end">
-                <a class="navbar-item" href="<?= site_url('albums') ?>">Albums</a>
-                <a class="navbar-item" href="<?= site_url('artistes') ?>">Artistes</a>
-                <a class="navbar-item" href="<?= site_url('music') ?>">Music</a>
-                <?php if (isset($is_logged_in) && $is_logged_in): ?>
-                    <a class="navbar-item" href="<?= site_url('playlist') ?>">Playlist</a>
-                    <a class="navbar-item" href="<?= site_url('connect/logout') ?>">Déconnexion</a>
-                <?php else: ?>
-                    <a class="navbar-item" href="<?= site_url('connect/login') ?>">Connexion</a>
-                <?php endif; ?>
+        <div class="container">
+            <div class="navbar-brand">
+                <a class="navbar-item" href="#">
+                    <img src="<?= base_url('assets/logo.png') ?>" alt="Logo">
+                </a>
+                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                </a>
+            </div>
+
+            <div id="navbarBasicExample" class="navbar-menu">
+                <div class="navbar-start">
+                    <a class="navbar-item" href="<?= site_url('albums') ?>">Albums</a>
+                    <a class="navbar-item" href="<?= site_url('artistes') ?>">Artistes</a>
+                    <a class="navbar-item" href="<?= site_url('music') ?>">Musiques</a>
+                    <?php if (isset($is_logged_in) && $is_logged_in): ?>
+                        <a class="navbar-item" href="<?= site_url('playlist') ?>">Playlists</a>
+                    <?php endif; ?>
+                </div>
+
+                <div class="navbar-end">
+                    <div class="navbar-item">
+                        <?php if (isset($is_logged_in) && $is_logged_in): ?>
+                            <a class="button is-light" href="<?= site_url('connect/logout') ?>">Déconnexion</a>
+                        <?php else: ?>
+                            <a class="button is-light" href="<?= site_url('connect/login') ?>">Connexion</a>
+                            <a class="button is-primary" href="<?= site_url('connect/create') ?>">Inscription</a>
+                        <?php endif; ?>
+                    </div>
+                </div>
             </div>
         </div>
     </nav>
-    <main class="container">
+    <main class="container" style="padding-top: 90px;"> <!-- Ajout de padding-top pour éviter que la navbar ne masque le contenu -->

application/views/login.php

@@ -1,29 +1,44 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Login</title>
-</head>
+<!doctype html>
+<html lang="fr">
 <body>
-    <?= validation_errors(); ?>
-
-    <?php if (isset($error)): ?>
-      <p style="color: red;"><?= $error ?></p>
-    <?php endif; ?>
-
-    <?= form_open('connect/login') ?>
-      <!-- Grid -->
-      <div class="grid">
-        <label for="email">Adresse mail</label>
-        <input type="email" id="email" name="email" placeholder="Email" value="<?= set_value('email') ?>" required>
-
-        <label for="password">Password</label>
-        <input type="password" id="password" name="password" placeholder="Password" value="<?= set_value('password') ?>" required>
-      </div>
-      <!-- Button -->
-      <button type="submit">Submit</button>
-      
-      <?= anchor('connect/create', "Pas de compte ? Créez-en un !"); ?>
-    </form>
+    <section class="hero is-fullheight">
+        <div class="hero-body">
+            <div class="container">
+                <div class="columns is-centered">
+                    <div class="column is-5">
+                        <div class="box">
+                            <h1 class="title is-1 has-text-centered">Connexion</h1>
+                            <?= validation_errors(); ?>
+                            <?php if (isset($error)): ?>
+                                <p class="has-text-danger"><?= $error ?></p>
+                            <?php endif; ?>
+                            <?= form_open('connect/login') ?>
+                                <div class="field">
+                                    <label class="label" for="email">Adresse mail</label>
+                                    <div class="control">
+                                        <input class="input is-dark" type="email" id="email" name="email" placeholder="Email" value="<?= set_value('email') ?>" required>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label class="label" for="password">Mot de passe</label>
+                                    <div class="control">
+                                        <input class="input is-dark" type="password" id="password" name="password" placeholder="Mot de passe" value="<?= set_value('password') ?>" required>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <div class="control">
+                                        <button class="button is-primary is-fullwidth is-large" type="submit">Se connecter</button>
+                                    </div>
+                                </div>
+                                <div class="has-text-centered">
+                                    <p>Vous n'avez pas de compte ? <a href="<?= site_url('connect/create') ?>" class="has-text-primary">Inscription</a></p>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
 </body>
 </html>
-

application/views/logout.php

@@ -2,14 +2,6 @@
 defined('BASEPATH') OR exit('No direct script access allowed');
 ?>
 <!doctype html>
-<html lang="en" class="has-navbar-fixed-top">
-<head>
-  <meta charset="UTF-8" />
-  <title>Dix heures</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"/>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-  <?=link_tag('assets/style.css')?>
-</head>
 <body>
   <main class='container'>
     <nav>

application/views/musiques_list.php

@@ -1,16 +1,33 @@
-<h5>Liste des musiques</h5>
-<section class="list">
-<?php
-foreach($musics as $music){
-    echo "<div><article>";
-    echo "<header class='short-text'>";
-    if(isset($music->trackName)) {
-        echo anchor("music/view/{$music->trackId}", $music->trackName);
-    }
-    echo "</header>";
-    echo '<img src="data:image/jpeg;base64,'.base64_encode($music->jpeg).'" />';
-    echo "<footer class='short-text'>{$music->year} - {$music->artistName} - {$music->albumName}</footer>
-    </article></div>";
-}
-?>
+<section class="section">
+    <div class="container">
+        <h1 class="title is-4 has-text-dark">Liste des musiques</h1>
+        <div class="columns is-multiline">
+            <?php foreach ($musics as $music): ?>
+                <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile">
+                    <div class="card">
+                        <div class="card-image">
+                            <figure class="image is-4by3">
+                                <img src="data:image/jpeg;base64,<?= base64_encode($music->jpeg) ?>" alt="<?= $music->trackName ?>">
+                            </figure>
+                        </div>
+                        <div class="card-content">
+                            <div class="media">
+                                <div class="media-content">
+                                    <p class="title is-4 music-title"><?= anchor("music/view/{$music->trackId}", $music->trackName) ?></p>
+                                    <p class="subtitle is-6"><?= "{$music->year} - {$music->artistName} - {$music->albumName}" ?></p>
+                                    <?php if (isset($is_logged_in) && $is_logged_in): ?>
+                                        <form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
+                                            <input type="hidden" name="itemId" value="<?= $music->trackId ?>">
+                                            <input type="hidden" name="itemType" value="song">
+                                            <button type="submit" class="button is-link">Ajouter à la playlist</button>
+                                        </form>
+                                    <?php endif; ?>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            <?php endforeach; ?>
+        </div>
+    </div>
 </section>

application/views/playlist_details.php

@@ -0,0 +1,38 @@
+<section class="section">
+    <div class="container">
+        <h1 class="title">Détails de la Playlist</h1>
+
+        <?php if ($items): ?>
+            <div class="table-container" style="max-height: 400px; overflow-y: auto;">
+                <table class="table is-fullwidth is-striped">
+                    <thead>
+                        <tr>
+                            <th>Titre</th>
+                            <th>Artiste</th>
+                            <th>Album</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php foreach ($items as $item): ?>
+                            <tr>
+                                <td><?= anchor("music/view/{$item->item_id}", $item->songName) ?></td>
+                                <td><?= $item->artistName ?></td>
+                                <td><?= $item->albumName ?></td>
+                                <td>
+                                    <form method="post" action="<?= site_url('playlist/deleteItem/'.$item->playlist_id.'/'.$item->item_id) ?>" style="display:inline;">
+                                        <button type="submit" class="button is-danger is-small">Supprimer</button>
+                                    </form>
+                                </td>
+                            </tr>
+                        <?php endforeach; ?>
+                    </tbody>
+                </table>
+            </div>
+        <?php else: ?>
+            <p>La playlist est vide.</p>
+        <?php endif; ?>
+
+        <a href="<?= site_url('playlist') ?>" class="button is-link">Retour aux playlists</a>
+    </div>
+</section>

application/views/playlists_list.php

@@ -0,0 +1,154 @@
+<section class="section">
+    <div class="container">
+        <h1 class="title">Mes Playlists</h1>
+
+        <?php if (isset($error)): ?>
+            <div class="notification is-danger">
+                <?= $error ?>
+            </div>
+        <?php endif; ?>
+
+        <?php if ($playlists): ?>
+            <div class="columns is-multiline">
+                <?php foreach ($playlists as $playlist): ?>
+                    <div class="column is-one-third">
+                        <div class="card">
+                            <div class="card-content">
+                                <div class="media">
+                                    <div class="media-content">
+                                        <p class="title is-4"><?= anchor("playlist/view/{$playlist->id}", $playlist->name) ?></p>
+                                    </div>
+                                    <div class="media-right buttons-right">
+                                        <?= form_open('playlist/duplicate/'.$playlist->id, ['style' => 'display:inline;']) ?>
+                                            <button type="submit" class="button is-info is-small">Dupliquer</button>
+                                        <?= form_close() ?>
+                                        <button class="button is-warning is-small" onclick="showRenameModal('<?= $playlist->id ?>', '<?= $playlist->name ?>')">Renommer</button>
+                                    </div>
+                                </div>
+                            </div>
+                            <footer class="card-footer">
+                                <?= form_open('playlist/delete/'.$playlist->id, ['class' => 'card-footer-item']) ?>
+                                    <button type="submit" class="button is-danger is-small">Supprimer</button>
+                                <?= form_close() ?>
+                            </footer>
+                        </div>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+        <?php else: ?>
+            <p>Vous n'avez pas encore de playlists.</p>
+        <?php endif; ?>
+
+        <div class="box">
+            <form method="post" action="<?= site_url('playlist/add') ?>">
+                <div class="field">
+                    <label class="label">Nom de la playlist</label>
+                    <div class="control">
+                        <input type="text" name="name" class="input" placeholder="Nom de la playlist" required>
+                    </div>
+                </div>
+                <div class="field">
+                    <label class="label">Type de Playlist</label>
+                    <div class="control">
+                        <div class="select">
+                            <select name="type" id="playlistType" onchange="toggleRandomOptions()">
+                                <option value="empty">Vide</option>
+                                <option value="random">Aléatoire</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="randomOptions" style="display: none;">
+                    <div class="field">
+                        <label class="label">Nombre de chansons</label>
+                        <div class="control">
+                            <input type="number" name="numSongs" class="input" placeholder="Nombre de chansons">
+                        </div>
+                    </div>
+                    <div class="field">
+                        <label class="label">Artiste</label>
+                        <div class="control">
+                            <div class="select">
+                                <select name="artist">
+                                    <option value="">Tous</option>
+                                    <?php foreach($artists as $artist): ?>
+                                        <option value="<?= $artist->name ?>"><?= $artist->name ?></option>
+                                    <?php endforeach; ?>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="field">
+                        <label class="label">Genre</label>
+                        <div class="control">
+                            <div class="select">
+                                <select name="genre">
+                                    <option value="">Tous</option>
+                                    <?php foreach($genres as $genre): ?>
+                                        <option value="<?= $genre->name ?>"><?= $genre->name ?></option>
+                                    <?php endforeach; ?>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="field">
+                    <div class="control">
+                        <button type="submit" class="button is-link">Créer une playlist</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</section>
+
+<!-- Rename Modal -->
+<div id="renameModal" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">Renommer la Playlist</p>
+            <button class="delete" aria-label="close" onclick="closeRenameModal()"></button>
+        </header>
+        <section class="modal-card-body">
+            <form id="renameForm" method="post" action="<?= site_url('playlist/rename') ?>">
+                <div class="field">
+                    <label class="label">Nouveau Nom</label>
+                    <div class="control">
+                        <input type="hidden" name="playlistId" id="renamePlaylistId">
+                        <input type="text" name="newName" class="input" id="renameNewName" required>
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="control">
+                        <button type="submit" class="button is-link">Renommer</button>
+                    </div>
+                </div>
+            </form>
+        </section>
+    </div>
+</div>
+
+<script>
+    function toggleRandomOptions() {
+        var playlistType = document.getElementById('playlistType').value;
+        var randomOptions = document.getElementById('randomOptions');
+        if (playlistType === 'random') {
+            randomOptions.style.display = 'block';
+        } else {
+            randomOptions.style.display = 'none';
+        }
+    }
+
+    function showRenameModal(playlistId, playlistName) {
+        document.getElementById('renamePlaylistId').value = playlistId;
+        document.getElementById('renameNewName').value = playlistName;
+        document.getElementById('renameModal').classList.add('is-active');
+    }
+
+    function closeRenameModal() {
+        document.getElementById('renameModal').classList.remove('is-active');
+    }
+</script>

application/views/select_playlist.php

@@ -0,0 +1,31 @@
+<section class="section">
+    <div class="container">
+        <h1 class="title is-4">Sélectionner une playlist</h1>
+
+        <?php if ($playlists): ?>
+            <form method="post" action="<?= site_url('playlist/addItems') ?>">
+                <input type="hidden" name="itemId" value="<?= $itemId ?>">
+                <input type="hidden" name="itemType" value="<?= $itemType ?>">
+                <div class="field">
+                    <label class="label">Choisir une playlist</label>
+                    <div class="control">
+                        <div class="select is-dark">
+                            <select name="playlistId">
+                                <?php foreach ($playlists as $playlist): ?>
+                                    <option value="<?= $playlist->id ?>"><?= $playlist->name ?></option>
+                                <?php endforeach; ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="control">
+                        <button type="submit" class="button is-link">Ajouter</button>
+                    </div>
+                </div>
+            </form>
+        <?php else: ?>
+            <p>Vous n'avez pas encore de playlists. Veuillez en créer une.</p>
+        <?php endif; ?>
+    </div>
+</section>

application/views/song_details.php

@@ -1,14 +1,28 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title><?= $song['songName'] ?> - Details</title>
-</head>
 <body>
-    <h1><?= $song['songName'] ?></h1>
-    <p><strong>Album:</strong> <?= anchor("music/view/{$song['albumId']}", $song['albumName']) ?> (<?= $song['year'] ?>)</p>
-    <p><strong>Artist:</strong> <?= $song['artistName'] ?></p>
-    <?php if(isset($song['jpeg']) && $song['jpeg'] != ''): ?>
-        <img src="data:image/jpeg;base64,<?= base64_encode($song['jpeg']) ?>" alt="<?= $song['albumName'] ?> Cover">
-    <?php endif; ?>
+    <section class="section">
+        <div class="container">
+            <h1 class="title"><?= $song['songName'] ?></h1>
+            <div class="columns">
+                <div class="column is-one-third">
+                    <figure class="image">
+                        <?php if(isset($song['jpeg']) && $song['jpeg'] != ''): ?>
+                            <img src="data:image/jpeg;base64,<?= base64_encode($song['jpeg']) ?>" alt="<?= $song['albumName'] ?> Cover">
+                        <?php else: ?>
+                            <img src="path_to_default_image" alt="Default Cover">
+                        <?php endif; ?>
+                    </figure>
+                </div>
+                <div class="column">
+                    <p><strong>Album:</strong> <?= anchor("albums/view/{$song['albumId']}", $song['albumName']) ?> (<?= $song['year'] ?>)</p>
+                    <p><strong>Artist:</strong> <?= $song['artistName'] ?></p>
+                    <p><strong>Disk Number:</strong> <?= $song['diskNumber'] ?></p>
+                    <p><strong>Track Number:</strong> <?= $song['number'] ?></p>
+                    <p><strong>Duration:</strong> <?= $song['duration'] ?> seconds</p>
+                </div>
+            </div>
+        </div>
+    </section>
 </body>
 </html>

assets/style.css

@@ -1,20 +1,38 @@
-section.list
-{
-	display : flex;
-	justify-content : space-between;
-	flex-wrap:wrap;
-}
-section.list > div 
-{
-width : 30%;
-}
-section.list img {
-	display:inline-block;
+/* style.css */
 
-}
-.short-text {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+.card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
+.card-image {
+    flex-shrink: 0;
+}
+
+.card-content {
+    flex-grow: 1;
+}
+
+.card-footer {
+    flex-shrink: 0;
+}
+
+.album-title, .artist-title, .music-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* Limite à 2 lignes */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: 3em; /* Ajuste en fonction de la taille de la police */
+}
+
+.columns {
+    justify-content: center; /* Centre les colonnes */
+}
+
+.card img {
+    object-fit: cover; /* Assure que les images couvrent bien les figures */
+    width: 100%;
+    height: auto;
+}