diff --git a/la-banquise/assets/iceberg.svg b/la-banquise/assets/iceberg.svg
new file mode 100644
index 0000000..f8a610e
--- /dev/null
+++ b/la-banquise/assets/iceberg.svg
@@ -0,0 +1,24 @@
+
diff --git a/la-banquise/index.html b/la-banquise/index.html
index 14296bd..9ce3aed 100644
--- a/la-banquise/index.html
+++ b/la-banquise/index.html
@@ -1,53 +1,31 @@
-
-
-
-
-
- La Banquise
-
-
-
- La Banquise
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ La Banquise
+
+
+
+
+ La Banquise
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/la-banquise/script.js b/la-banquise/script.js
index 055a591..211c711 100644
--- a/la-banquise/script.js
+++ b/la-banquise/script.js
@@ -1,17 +1,21 @@
-const tile = document.querySelectorAll("a")[0];
-const parent = tile.parentNode;
-tile.remove();
-
-const tiles = [
- { name: "Notre wiki", href: "https://wiki.la-banquise.fr" },
- { name: "Notre git", href: "https://git.la-banquise.fr" },
+const tile = document.querySelectorAll(".grid-container > *")[0];
+const parent = tile.parentNode;
+tile.remove();
+
+const tiles = [
+ { name: "Notre wiki", href: "https://wiki.la-banquise.fr" },
+ { name: "Notre git", href: "https://git.la-banquise.fr" },
{ name: "Panel jeux", href: "https://panel.la-banquise.fr" },
{ name: "Discord", href: "https://discord.gg/QQWwzX5ptY" },
-]
-tiles.forEach((info) => {
- const newTile = tile.cloneNode(true);
- newTile.querySelectorAll("p")[0].innerHTML = info.name;
- newTile.href = info.href;
- parent.appendChild(newTile);
-});
+]
+
+tiles.forEach((info) => {
+ const newTile = tile.cloneNode(true);
+ newTile.querySelectorAll(".item-name").forEach((el) => {
+ el.innerText = info.name;
+ });
+ newTile.href = info.href;
+ parent.appendChild(newTile);
+});
+
diff --git a/la-banquise/style.css b/la-banquise/style.css
index c845a58..2feae16 100644
--- a/la-banquise/style.css
+++ b/la-banquise/style.css
@@ -1,125 +1,136 @@
-@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
-
-/* Réinitialisation et styles généraux */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: Roboto, sans-serif;
-}
-body {
- margin: 0;
- padding: 30px;
- min-height: 100vh;
- background: linear-gradient(45deg, #001e6c, #5dadc2, #001e6c);
- background-size: 400% 400%;
- animation: gradient 100s ease infinite;
-}
-@keyframes gradient {
- 0% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- 100% { background-position: 0% 50%; }
-}
-/* Exemple de contenu */
-.content {
- color: #fff;
- text-align: center;
- padding-top: 20vh;
-}
-
-h1 {
- display: flex;
- justify-content: center;
-}
-
-/* Style de la vague en bas de page */
-.wave {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- overflow: hidden;
- line-height: 0;
-}
-.wave svg {
- position: relative;
- display: block;
- width: calc(100% + 1.3px);
- height: 150px;
-}
-.wave .shape-fill {
- fill: rgba(255,255,255,0.2);
-}
-.title {
- font-size: 2.5rem;
- margin-bottom: 2rem;
-}
-
-/* En-tête du site */
-header {
- text-align: center;
- color: #fff;
- padding: 1rem;
-}
-
-/* Container en flexbox pour agencer les éléments dans une "grid" */
-.grid-container {
- flex: 1;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: stretch;
- gap: 20px;
- padding: 1rem;
-}
-
-/* Chaque élément de la grid */
-.grid-item {
- background: rgba(255,255,255,0);
- padding: 2px;
- border-radius: 8px;
- color: #fff;
- text-align: center;
- /* Permet de s'étendre sur au moins 300px et de grandir si besoin */
- flex: 0 1 calc(10% - 40px); /* 3 items par ligne avec 20px de gap */
- max-width: calc(10% - 40px);
- box-shadow: 0 4px 6px rgba(0,0,0,0);
- transition: transform 0.3s;
-}
-
-.grid-item:hover {
- transform: scale(1.05);
- background: rgba(255,255,255,0.1);
- box-shadow: 0 4px 6px rgba(0,0,0,0.2);
-}
-
-.grid-item img,
-.grid-item svg {
- max-width: 100%;
- height: auto;
- display: block;
- margin: 0 auto 10px;
- /* Pour donner une vue isométrique */
- transform: rotateX(0deg) rotateZ(0deg);
- transform-origin: center;
-}
-
-.grid-item p {
- font-size: 1.5rem;
- margin-top: 0rem;
- font-weight: bold;
-}
-
-@media (max-width: 900px) {
- .grid-item {
- flex: 0 1 calc(25% - 40px);
- max-width: calc(25% - 40px);
- }
-}
-
-@media (max-width: 600px) {
- .grid-item {
- flex: 0 1 calc(50% - 40px);
- max-width: calc(50% - 40px);
- }
-}
+@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: Roboto, sans-serif;
+}
+
+body {
+ margin: 0;
+ padding: 30px;
+ min-height: 100vh;
+ background: linear-gradient(45deg, #001e6c, #5dadc2, #001e6c);
+ background-size: 400% 400%;
+ animation: gradient 100s ease infinite;
+}
+
+@keyframes gradient {
+ 0% {
+ background-position: 0% 50%;
+ }
+
+ 50% {
+ background-position: 100% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+h1.title {
+ display: flex;
+ justify-content: center;
+}
+
+.hidden {
+ visibility: hidden;
+}
+
+/* Style de la vague en bas de page */
+.wave {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+}
+
+.wave svg {
+ position: relative;
+ display: block;
+ width: calc(100% + 1.3px);
+ height: 150px;
+}
+
+.wave .shape-fill {
+ fill: rgba(255, 255, 255, 0.2);
+}
+
+.title {
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+}
+
+/* En-tête du site */
+header {
+ text-align: center;
+ color: #fff;
+ padding: 1rem;
+}
+
+/* Container en flexbox pour agencer les éléments dans une "grid" */
+.grid-container {
+ flex: 1;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: stretch;
+ gap: 20px;
+ padding: 1rem;
+}
+
+/* Chaque élément de la grid */
+.grid-item {
+ background: rgba(255, 255, 255, 0);
+ padding: 2px;
+ border-radius: 8px;
+ color: #fff;
+ text-align: center;
+ /* Permet de s'étendre sur au moins 300px et de grandir si besoin */
+ flex: 0 1 calc(10% - 40px);
+ /* 3 items par ligne avec 20px de gap */
+ max-width: calc(10% - 40px);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
+ transition: transform 0.3s;
+}
+
+.grid-item:hover {
+ transform: scale(1.05);
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.grid-item img,
+.grid-item object {
+ max-width: 100%;
+ height: auto;
+ display: block;
+ margin: 0 auto 10px;
+ /* Pour donner une vue isométrique */
+ transform: rotateX(0deg) rotateZ(0deg);
+ transform-origin: center;
+}
+
+.grid-item p {
+ font-size: 1.5rem;
+ margin-top: 0rem;
+ font-weight: bold;
+}
+
+@media (max-width: 900px) {
+ .grid-item {
+ flex: 0 1 calc(25% - 40px);
+ max-width: calc(25% - 40px);
+ }
+}
+
+@media (max-width: 600px) {
+ .grid-item {
+ flex: 0 1 calc(50% - 40px);
+ max-width: calc(50% - 40px);
+ }
+}
\ No newline at end of file