From 576106039362a4c412522da705927b93a89ff882 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9line=20Eap?= <celine-chhun-huy.eap@edu.devinci.fr>
Date: Thu, 23 Jul 2026 15:33:46 +0200
Subject: [PATCH 1/2] add: 3 new ads

---
 webapp/src/components/ad/ArturiaCard.vue      | 206 +++++++++++
 webapp/src/components/ad/AudiofanzineCard.vue | 235 ++++++++++++
 webapp/src/components/ad/VpnBanner.vue        | 336 ++++++++++++++++++
 webapp/src/components/app/ProjectSelector.vue |  62 +---
 .../components/app/timeline/TimelineView.vue  |   3 +
 webapp/src/components/blog/BlogContain.vue    |   4 +
 webapp/src/components/blog/BlogTrends.vue     |   1 -
 webapp/src/styles/base.css                    |   5 +
 webapp/src/styles/blog.css                    |   2 +-
 9 files changed, 802 insertions(+), 52 deletions(-)
 create mode 100644 webapp/src/components/ad/ArturiaCard.vue
 create mode 100644 webapp/src/components/ad/AudiofanzineCard.vue
 create mode 100644 webapp/src/components/ad/VpnBanner.vue

diff --git a/webapp/src/components/ad/ArturiaCard.vue b/webapp/src/components/ad/ArturiaCard.vue
new file mode 100644
index 0000000..6ac993c
--- /dev/null
+++ b/webapp/src/components/ad/ArturiaCard.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+interface Props {
+  brand?: string;
+  title?: string;
+  description?: string;
+  ctaLabel?: string;
+  ctaLink?: string;
+  imageUrl?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  brand: "Arturia",
+  title: "Des synthés qui sonnent comme vos idées",
+  description:
+    "Synthés hardware, contrôleurs et V Collection : le studio d'Arturia pour aller plus loin que le navigateur.",
+  ctaLabel: "Explore the offers",
+  ctaLink: "#",
+  imageUrl: "",
+});
+</script>
+
+<template>
+  <a
+    :href="props.ctaLink"
+    class="partner-card"
+    target="_blank"
+    rel="noopener noreferrer sponsored"
+  >
+    <div class="partner-card-visual">
+      <img
+        v-if="props.imageUrl"
+        :src="props.imageUrl"
+        :alt="props.brand"
+        class="partner-card-img"
+      />
+      <svg
+        v-else
+        class="partner-card-placeholder"
+        viewBox="0 0 200 120"
+        fill="none"
+        aria-hidden="true"
+      >
+        <!-- Blocs géométriques dans l'esprit du hero Arturia -->
+        <rect x="0" y="0" width="200" height="120" fill="#f4f4f4" />
+        <rect x="70" y="0" width="130" height="120" fill="#e8ecfb" />
+        <rect
+          x="120"
+          y="0"
+          width="80"
+          height="120"
+          fill="var(--partner-blue)"
+          opacity="0.85"
+        />
+        <circle cx="95" cy="55" r="26" fill="var(--partner-orange)" />
+        <g stroke="rgba(0,0,0,0.15)" stroke-width="1">
+          <line x1="110" y1="0" x2="110" y2="120" />
+          <line x1="130" y1="0" x2="130" y2="120" />
+          <line x1="150" y1="0" x2="150" y2="120" />
+          <line x1="0" y1="30" x2="200" y2="30" />
+          <line x1="0" y1="60" x2="200" y2="60" />
+          <line x1="0" y1="90" x2="200" y2="90" />
+        </g>
+      </svg>
+    </div>
+
+    <div class="partner-card-content">
+      <div class="partner-card-brand">
+        <span class="partner-card-logo" aria-hidden="true">
+          <svg viewBox="0 0 40 40" width="18" height="18">
+            <circle cx="20" cy="20" r="20" fill="var(--partner-accent)" />
+            <circle
+              cx="20"
+              cy="20"
+              r="10"
+              fill="none"
+              stroke="#000"
+              stroke-width="3"
+            />
+            <circle cx="20" cy="20" r="2.5" fill="#000" />
+          </svg>
+        </span>
+        <span class="partner-card-brand-text">{{ props.brand }}</span>
+      </div>
+
+      <p class="partner-card-title">{{ props.title }}</p>
+      <p class="partner-card-description">{{ props.description }}</p>
+
+      <span class="partner-card-cta">
+        <span class="partner-card-cta-bar" aria-hidden="true"></span>
+        {{ props.ctaLabel }}
+      </span>
+    </div>
+  </a>
+</template>
+
+<style scoped>
+/* stylelint-disable color-no-hex -- couleurs signature de la marque partenaire (Arturia : turquoise/bleu/orange), pas des tokens du design system */
+.partner-card {
+  --partner-accent: #12e4c5;
+  --partner-blue: #1c1cff;
+  --partner-orange: #ff5b1f;
+
+  display: flex;
+  flex-direction: column;
+  max-width: 340px;
+  background: #ffffff;
+  border: 2px solid #0a0a0a;
+  border-radius: 14px;
+  overflow: hidden;
+  text-decoration: none;
+  transition: all 0.25s ease;
+}
+
+.partner-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 6px 6px 0 #0a0a0a;
+}
+/* stylelint-enable color-no-hex */
+
+.partner-card-visual {
+  position: relative;
+  height: 150px;
+  border-bottom: 2px solid #0a0a0a;
+  overflow: hidden;
+}
+
+.partner-card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.partner-card-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.partner-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1.25rem 1.5rem 1.5rem;
+}
+
+.partner-card-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.partner-card-logo {
+  display: flex;
+}
+
+.partner-card-brand-text {
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #0a0a0a;
+}
+
+.partner-card-title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: bold;
+  line-height: 1.3;
+  color: #0a0a0a;
+}
+
+.partner-card-description {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: rgba(10, 10, 10, 0.65);
+}
+
+.partner-card-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 0.6rem;
+  padding: 0.6rem 1.1rem;
+  width: fit-content;
+  background: var(--partner-blue);
+  border-radius: 6px;
+  color: #ffffff;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.partner-card-cta-bar {
+  width: 3px;
+  height: 14px;
+  background: #ffffff;
+  opacity: 0.7;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .partner-card {
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/webapp/src/components/ad/AudiofanzineCard.vue b/webapp/src/components/ad/AudiofanzineCard.vue
new file mode 100644
index 0000000..386a4e3
--- /dev/null
+++ b/webapp/src/components/ad/AudiofanzineCard.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+interface Props {
+  brand?: string;
+  tagline?: string;
+  title?: string;
+  description?: string;
+  ctaLabel?: string;
+  ctaLink?: string;
+  imageUrl?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  brand: "audiofanzine",
+  tagline: "web in, audio out",
+  title: "Teste avant d'acheter, économise en seconde main",
+  description:
+    "Des milliers de tests de matériel home studio et des petites annonces entre musiciens pour équiper ton setup sans se ruiner.",
+  ctaLabel: "Découvrir Audiofanzine",
+  ctaLink: "#",
+  imageUrl: "",
+});
+</script>
+
+<template>
+  <a
+    :href="props.ctaLink"
+    class="partner-card"
+    target="_blank"
+    rel="noopener noreferrer sponsored"
+  >
+    <div class="partner-card-visual">
+      <img
+        v-if="props.imageUrl"
+        :src="props.imageUrl"
+        :alt="props.brand"
+        class="partner-card-img"
+      />
+      <svg
+        v-else
+        class="partner-card-placeholder"
+        viewBox="0 0 200 120"
+        fill="none"
+        aria-hidden="true"
+      >
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="120"
+          fill="var(--partner-coral)"
+        />
+        <rect x="0" y="0" width="120" height="120" fill="#000" opacity="0.15" />
+        <text
+          x="14"
+          y="55"
+          fill="#ffffff"
+          font-family="Arial, sans-serif"
+          font-weight="800"
+          font-size="22"
+        >
+          TESTS
+        </text>
+        <text
+          x="14"
+          y="80"
+          fill="#ffffff"
+          font-family="Arial, sans-serif"
+          font-weight="800"
+          font-size="22"
+        >
+          MATOS
+        </text>
+        <rect
+          x="150"
+          y="14"
+          width="38"
+          height="20"
+          rx="4"
+          fill="var(--partner-yellow)"
+        />
+        <text
+          x="157"
+          y="28"
+          fill="#0a0f16"
+          font-family="Arial, sans-serif"
+          font-weight="800"
+          font-size="10"
+        >
+          PROMO
+        </text>
+      </svg>
+    </div>
+
+    <div class="partner-card-content">
+      <div class="partner-card-brand">
+        <svg
+          class="partner-card-logo"
+          viewBox="0 0 24 16"
+          width="22"
+          height="15"
+          aria-hidden="true"
+        >
+          <path
+            d="M0 8 L4 8 L6 2 L9 14 L12 4 L14 8 L24 8"
+            fill="none"
+            stroke="#ffffff"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <span class="partner-card-brand-text">{{ props.brand }}</span>
+      </div>
+      <span class="partner-card-tagline">{{ props.tagline }}</span>
+
+      <p class="partner-card-title">{{ props.title }}</p>
+      <p class="partner-card-description">{{ props.description }}</p>
+
+      <span class="partner-card-cta">
+        {{ props.ctaLabel }}
+        <i class="fas fa-arrow-right" aria-hidden="true"></i>
+      </span>
+    </div>
+  </a>
+</template>
+
+<style scoped>
+/* stylelint-disable color-no-hex -- couleurs signature de la marque partenaire (Audiofanzine : navy/corail/jaune), pas des tokens du design system */
+.partner-card {
+  --partner-navy: #182430;
+  --partner-coral: #ec4630;
+  --partner-yellow: #ffcc00;
+
+  display: flex;
+  flex-direction: column;
+  background: var(--partner-navy);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.partner-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(236, 70, 48, 0.4);
+  box-shadow: 0 12px 30px rgba(236, 70, 48, 0.15);
+}
+/* stylelint-enable color-no-hex */
+
+.partner-card-visual {
+  position: relative;
+  height: 150px;
+}
+
+.partner-card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.partner-card-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.partner-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 1.25rem 1.5rem 1.5rem;
+}
+
+.partner-card-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.partner-card-brand-text {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--color-white);
+}
+
+.partner-card-tagline {
+  font-size: 0.65rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 0.4rem;
+}
+
+.partner-card-title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: bold;
+  line-height: 1.3;
+  color: var(--color-white);
+}
+
+.partner-card-description {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.partner-card-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--partner-coral);
+}
+
+.partner-card-cta i {
+  font-size: 0.8rem;
+  transition: transform 0.2s ease;
+}
+
+.partner-card:hover .partner-card-cta i {
+  transform: translateX(3px);
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .partner-card {
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/webapp/src/components/ad/VpnBanner.vue b/webapp/src/components/ad/VpnBanner.vue
new file mode 100644
index 0000000..756c47e
--- /dev/null
+++ b/webapp/src/components/ad/VpnBanner.vue
@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { useAuthStore } from "../../stores/authStore";
+
+interface Props {
+  brand?: string;
+  tagline?: string;
+  ctaLabel?: string;
+  ctaLink?: string;
+  offerTitle?: string;
+  offerHighlight?: string;
+  offerSubtitle?: string;
+  imageUrl?: string;
+  dismissible?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  brand: "NordVPN",
+  tagline: "Tous vos contenus disponibles en France",
+  ctaLabel: "Débloquer",
+  ctaLink: "#",
+  offerTitle: "3 mois gratuits puis",
+  offerHighlight: "-70% en exclusivité",
+  offerSubtitle: "avec NordVPN",
+  imageUrl: "",
+  dismissible: true,
+});
+
+const emit = defineEmits<{
+  (e: "dismiss"): void;
+}>();
+
+const STORAGE_KEY = "ad-app";
+
+const authStore = useAuthStore();
+const isAdmin = computed(() => authStore.user?.role === "ROLE_ADMIN");
+
+// Le close n'apparaît que si la page l'autorise ET que l'utilisateur est admin.
+const canDismiss = computed(() => props.dismissible && isAdmin.value);
+
+const visible = ref(true);
+
+onMounted(() => {
+  // Si un admin a déjà fermé la bannière sur ce navigateur, elle reste masquée
+  // (peu importe la page, la clé de storage est partagée).
+  if (localStorage.getItem(STORAGE_KEY) === "false") {
+    visible.value = false;
+  }
+});
+
+// Expose l'état de visibilité pour que le parent puisse gérer son propre layout
+// (ex: gap en bas de page si la pub n'est pas affichée).
+defineExpose({
+  visible,
+});
+
+const dismiss = () => {
+  if (!canDismiss.value) return;
+
+  visible.value = false;
+  localStorage.setItem(STORAGE_KEY, "false");
+  emit("dismiss");
+};
+</script>
+
+<template>
+  <div v-if="visible" class="promo-banner">
+    <button
+      v-if="canDismiss"
+      type="button"
+      class="promo-close"
+      aria-label="Fermer la bannière"
+      @click="dismiss"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+
+    <div class="promo-left">
+      <div class="promo-logo">
+        <span class="promo-logo-icon" aria-hidden="true">
+          <svg
+            viewBox="3 -21.95 244 244"
+            xmlns="http://www.w3.org/2000/svg"
+            width="26"
+            height="26"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M26.2 197C11.6 176.9 3 152.1 3 125.2 3 57.7 57.6 3 125 3s122 54.7 122 122.3c0 26.8-8.6 51.6-23.2 71.8l-58.6-95.4-5.7 9.6 5.7 26.6-40.3-69-24.8 42.1 5.8 26.9-21.1-36.1z"
+              fill="#FFFFFF"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+        <span class="promo-logo-text">{{ props.brand }}</span>
+      </div>
+      <p class="promo-tagline">{{ props.tagline }}</p>
+    </div>
+
+    <a :href="props.ctaLink" class="promo-cta" rel="noopener noreferrer">
+      <i class="fas fa-arrow-right" />
+      <span>{{ props.ctaLabel.toUpperCase() }}</span>
+    </a>
+
+    <div class="promo-right">
+      <p class="promo-offer">
+        {{ props.offerTitle }}
+        <strong class="promo-offer-highlight">{{
+          props.offerHighlight
+        }}</strong>
+      </p>
+      <span class="promo-subtitle">{{
+        props.offerSubtitle.toUpperCase()
+      }}</span>
+    </div>
+
+    <div class="promo-visual">
+      <img
+        v-if="props.imageUrl"
+        :src="props.imageUrl"
+        :alt="props.brand"
+        class="promo-visual-img"
+      />
+      <svg
+        v-else
+        class="promo-visual-placeholder"
+        width="60"
+        height="60"
+        viewBox="0 0 60 60"
+        fill="none"
+        aria-hidden="true"
+      >
+        <rect
+          x="18"
+          y="4"
+          width="26"
+          height="52"
+          rx="5"
+          fill="rgba(255,255,255,0.12)"
+          stroke="rgba(255,255,255,0.25)"
+        />
+        <rect
+          x="24"
+          y="12"
+          width="14"
+          height="24"
+          rx="2"
+          fill="rgba(255,255,255,0.2)"
+        />
+        <circle cx="31" cy="48" r="2.5" fill="rgba(255,255,255,0.3)" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.promo-banner {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+  min-height: 90px;
+  padding: 0.75rem 3.5rem 0.75rem 2rem;
+  overflow: hidden;
+  background: linear-gradient(100deg, #5b3164 0%, #95346a 100%);
+  color: var(--color-white);
+}
+
+.promo-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 50%;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 2;
+}
+
+.promo-close:hover {
+  background: rgba(255, 255, 255, 0.16);
+  color: var(--color-white);
+}
+
+.promo-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.promo-logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.promo-logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  color: var(--color-white);
+}
+
+.promo-logo-text {
+  font-weight: 700;
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+}
+
+.promo-tagline {
+  margin: 0;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 1.3;
+  max-width: 220px;
+  text-align: center;
+}
+
+.promo-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.9rem 1.75rem;
+  background: #bf3470;
+  border-radius: 12px;
+  color: var(--color-white);
+  font-weight: 800;
+  font-size: 1rem;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.promo-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.promo-offer {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-white);
+}
+
+.promo-offer-highlight {
+  color: #ff6fb8;
+  font-weight: 800;
+}
+
+.promo-subtitle {
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.promo-visual {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.promo-visual-img {
+  height: 100%;
+  max-height: 90px;
+  width: auto;
+  object-fit: contain;
+}
+
+@media (max-width: 1024px) {
+  .promo-banner {
+    grid-template-columns: auto 1fr auto;
+    padding-right: 2.5rem;
+  }
+
+  .promo-visual {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .promo-banner {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    text-align: center;
+    gap: 0.75rem;
+    padding: 1.25rem 2.5rem;
+  }
+
+  .promo-tagline {
+    max-width: none;
+  }
+
+  .promo-right {
+    align-items: center;
+    text-align: center;
+  }
+
+  .promo-cta {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/webapp/src/components/app/ProjectSelector.vue b/webapp/src/components/app/ProjectSelector.vue
index 835b478..0cfa28a 100644
--- a/webapp/src/components/app/ProjectSelector.vue
+++ b/webapp/src/components/app/ProjectSelector.vue
@@ -12,6 +12,7 @@ import type {
   TrashedProjectListItem,
 } from "../../lib/utils/types";
 import TabBar, { type TabItem } from "../shared/TabBar.vue";
+import VpnBanner from "../ad/VpnBanner.vue";
 
 type Tab = "mine" | "favorites" | "discover" | "trash";
 
@@ -577,6 +578,10 @@ onMounted(() => loadProjects());
         </div>
       </template>
     </main>
+
+    <div class="vpn-banner-full">
+      <VpnBanner :dismissible="false" />
+    </div>
   </div>
 
   <BaseModal
@@ -786,51 +791,6 @@ onMounted(() => loadProjects());
   transform: translateX(0);
 }
 
-.icon-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  background: transparent;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: 6px;
-  color: var(--color-white-light);
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  opacity: 0.5;
-
-  &:hover {
-    opacity: 1;
-    border-color: var(--color-accent3-hover);
-    color: var(--color-white);
-  }
-
-  &.active {
-    opacity: 1;
-    border-color: var(--color-accent3-hover);
-    color: var(--color-accent3-hover);
-    background: rgba(var(--color-accent3-rgb), 0.2);
-  }
-
-  &:disabled {
-    cursor: wait;
-    opacity: 0.3;
-  }
-}
-
-.favorite-btn.active {
-  border-color: var(--color-danger-hover);
-  color: var(--color-danger-hover);
-  background: rgba(var(--color-danger-hover-rgb), 0.15);
-}
-
-.favorite-btn:hover {
-  border-color: var(--color-danger-hover);
-  color: var(--color-danger-hover);
-}
-
 .state-container {
   text-align: center;
   padding: 60px 20px;
@@ -878,11 +838,6 @@ onMounted(() => loadProjects());
   }
 }
 
-.delete-btn:hover {
-  border-color: var(--color-danger-hover);
-  color: var(--color-danger-hover);
-}
-
 .trash-card {
   cursor: default;
   opacity: 0.75;
@@ -929,4 +884,11 @@ onMounted(() => loadProjects());
     grid-template-columns: 1fr;
   }
 }
+
+.vpn-banner-full {
+  width: 100vw;
+  margin-top: 80px;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+}
 </style>
diff --git a/webapp/src/components/app/timeline/TimelineView.vue b/webapp/src/components/app/timeline/TimelineView.vue
index 6d4122e..a57719f 100644
--- a/webapp/src/components/app/timeline/TimelineView.vue
+++ b/webapp/src/components/app/timeline/TimelineView.vue
@@ -48,6 +48,7 @@ import EmptyState from "../../ui/EmptyState.vue";
 import FormField from "../../ui/FormField.vue";
 import BaseInput from "../../ui/BaseInput.vue";
 import { useToast } from "../../../composables/useToast";
+import VpnBanner from "../../ad/VpnBanner.vue";
 
 const emit = defineEmits<{
   (
@@ -1183,6 +1184,8 @@ defineExpose({
       </ul>
     </div>
   </Teleport>
+
+  <VpnBanner :dismissible="true" />
 </template>
 
 <style scoped lang="scss">
diff --git a/webapp/src/components/blog/BlogContain.vue b/webapp/src/components/blog/BlogContain.vue
index 96d3eec..5dbcd5b 100644
--- a/webapp/src/components/blog/BlogContain.vue
+++ b/webapp/src/components/blog/BlogContain.vue
@@ -9,6 +9,8 @@ import apiClient from "../../lib/utils/apiClient";
 import type { User } from "../../lib/utils/types";
 import BlogTopLikedUsers from "./BlogTopLikedUsers.vue";
 import BlogBackground from "./BlogBackground.vue";
+import ArturiaBanner from "../ad/ArturiaCard.vue";
+import AudiofanzineCard from "../ad/AudiofanzineCard.vue";
 
 const postsKey = ref(0);
 const isAuthenticated = ref(false);
@@ -59,6 +61,7 @@ onMounted(() => {
     </div>
     <div class="blog-users">
       <BlogTopLikedUsers />
+      <ArturiaBanner />
     </div>
     <div class="blog-content">
       <!-- Afficher le formulaire seulement si connecté -->
@@ -79,6 +82,7 @@ onMounted(() => {
         @tagDeselected="handleTagDeselected"
         @filtersCleared="handleFiltersCleared"
       />
+      <AudiofanzineCard />
     </div>
   </div>
 </template>
diff --git a/webapp/src/components/blog/BlogTrends.vue b/webapp/src/components/blog/BlogTrends.vue
index 1d8cf72..5d6285c 100644
--- a/webapp/src/components/blog/BlogTrends.vue
+++ b/webapp/src/components/blog/BlogTrends.vue
@@ -105,7 +105,6 @@ defineExpose({ clearFilters, selectedTags });
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-md);
   padding: 20px;
-  margin-bottom: 20px;
   color: var(--color-white);
   display: flex;
   flex-direction: column;
diff --git a/webapp/src/styles/base.css b/webapp/src/styles/base.css
index c6f93f1..4a02f38 100644
--- a/webapp/src/styles/base.css
+++ b/webapp/src/styles/base.css
@@ -302,4 +302,9 @@ input[type="submit"]:disabled {
   padding: 40px 24px;
   max-width: 1200px;
   width: 100%;
+  min-height: calc(100vh - (88px + 90px));
+}
+
+.page-container.no-ad-gap {
+  padding-bottom: 80px;
 }
\ No newline at end of file
diff --git a/webapp/src/styles/blog.css b/webapp/src/styles/blog.css
index ee9cb7d..8aa61e2 100644
--- a/webapp/src/styles/blog.css
+++ b/webapp/src/styles/blog.css
@@ -890,7 +890,7 @@
 }
 
 .tag-suggestion-item:hover {
-  background: var(--color-accent);
+  background: var(--color-accent-pale);
   color: var(--color-accent-hover);
 }
 

From 00aeee254a85da5f54516d677ec1509959a948e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9line=20Eap?= <celine-chhun-huy.eap@edu.devinci.fr>
Date: Thu, 23 Jul 2026 22:40:00 +0200
Subject: [PATCH 2/2] fix: add toggle

---
 webapp/src/components/ad/ArturiaCard.vue      |   9 +-
 webapp/src/components/ad/AudiofanzineCard.vue |   9 +-
 webapp/src/components/ad/VpnBanner.vue        |  91 ++--------------
 webapp/src/components/app/ProjectSelector.vue |   7 +-
 .../profile/ProfileSettingsForm.vue           | 103 +++++++++++++++++-
 webapp/src/stores/adsStore.ts                 |  33 ++++++
 webapp/src/styles/base.css                    |   5 -
 7 files changed, 164 insertions(+), 93 deletions(-)
 create mode 100644 webapp/src/stores/adsStore.ts

diff --git a/webapp/src/components/ad/ArturiaCard.vue b/webapp/src/components/ad/ArturiaCard.vue
index 6ac993c..b59b6af 100644
--- a/webapp/src/components/ad/ArturiaCard.vue
+++ b/webapp/src/components/ad/ArturiaCard.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { useAdsStore } from "../../stores/adsStore";
+
 interface Props {
   brand?: string;
   title?: string;
@@ -17,10 +20,14 @@ const props = withDefaults(defineProps<Props>(), {
   ctaLink: "#",
   imageUrl: "",
 });
+
+const adsStore = useAdsStore();
+const { isEnabled } = storeToRefs(adsStore);
 </script>
 
 <template>
   <a
+    v-if="isEnabled"
     :href="props.ctaLink"
     class="partner-card"
     target="_blank"
@@ -164,7 +171,7 @@ const props = withDefaults(defineProps<Props>(), {
 .partner-card-title {
   margin: 0;
   font-size: 1.15rem;
-  font-weight: bold;
+  font-weight: 700;
   line-height: 1.3;
   color: #0a0a0a;
 }
diff --git a/webapp/src/components/ad/AudiofanzineCard.vue b/webapp/src/components/ad/AudiofanzineCard.vue
index 386a4e3..fb35e0b 100644
--- a/webapp/src/components/ad/AudiofanzineCard.vue
+++ b/webapp/src/components/ad/AudiofanzineCard.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { useAdsStore } from "../../stores/adsStore";
+
 interface Props {
   brand?: string;
   tagline?: string;
@@ -19,10 +22,14 @@ const props = withDefaults(defineProps<Props>(), {
   ctaLink: "#",
   imageUrl: "",
 });
+
+const adsStore = useAdsStore();
+const { isEnabled } = storeToRefs(adsStore);
 </script>
 
 <template>
   <a
+    v-if="isEnabled"
     :href="props.ctaLink"
     class="partner-card"
     target="_blank"
@@ -195,7 +202,7 @@ const props = withDefaults(defineProps<Props>(), {
 .partner-card-title {
   margin: 0;
   font-size: 1.15rem;
-  font-weight: bold;
+  font-weight: 600;
   line-height: 1.3;
   color: var(--color-white);
 }
diff --git a/webapp/src/components/ad/VpnBanner.vue b/webapp/src/components/ad/VpnBanner.vue
index 756c47e..e0b9016 100644
--- a/webapp/src/components/ad/VpnBanner.vue
+++ b/webapp/src/components/ad/VpnBanner.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import { useAuthStore } from "../../stores/authStore";
+import { storeToRefs } from "pinia";
+import { useAdsStore } from "../../stores/adsStore";
 
 interface Props {
   brand?: string;
@@ -26,65 +26,12 @@ const props = withDefaults(defineProps<Props>(), {
   dismissible: true,
 });
 
-const emit = defineEmits<{
-  (e: "dismiss"): void;
-}>();
-
-const STORAGE_KEY = "ad-app";
-
-const authStore = useAuthStore();
-const isAdmin = computed(() => authStore.user?.role === "ROLE_ADMIN");
-
-// Le close n'apparaît que si la page l'autorise ET que l'utilisateur est admin.
-const canDismiss = computed(() => props.dismissible && isAdmin.value);
-
-const visible = ref(true);
-
-onMounted(() => {
-  // Si un admin a déjà fermé la bannière sur ce navigateur, elle reste masquée
-  // (peu importe la page, la clé de storage est partagée).
-  if (localStorage.getItem(STORAGE_KEY) === "false") {
-    visible.value = false;
-  }
-});
-
-// Expose l'état de visibilité pour que le parent puisse gérer son propre layout
-// (ex: gap en bas de page si la pub n'est pas affichée).
-defineExpose({
-  visible,
-});
-
-const dismiss = () => {
-  if (!canDismiss.value) return;
-
-  visible.value = false;
-  localStorage.setItem(STORAGE_KEY, "false");
-  emit("dismiss");
-};
+const adsStore = useAdsStore();
+const { isEnabled: visible } = storeToRefs(adsStore);
 </script>
 
 <template>
   <div v-if="visible" class="promo-banner">
-    <button
-      v-if="canDismiss"
-      type="button"
-      class="promo-close"
-      aria-label="Fermer la bannière"
-      @click="dismiss"
-    >
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-      >
-        <line x1="18" y1="6" x2="6" y2="18"></line>
-        <line x1="6" y1="6" x2="18" y2="18"></line>
-      </svg>
-    </button>
-
     <div class="promo-left">
       <div class="promo-logo">
         <span class="promo-logo-icon" aria-hidden="true">
@@ -107,7 +54,12 @@ const dismiss = () => {
       <p class="promo-tagline">{{ props.tagline }}</p>
     </div>
 
-    <a :href="props.ctaLink" class="promo-cta" rel="noopener noreferrer">
+    <a
+      :href="props.ctaLink"
+      class="promo-cta"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       <i class="fas fa-arrow-right" />
       <span>{{ props.ctaLabel.toUpperCase() }}</span>
     </a>
@@ -178,29 +130,6 @@ const dismiss = () => {
   color: var(--color-white);
 }
 
-.promo-close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 50%;
-  color: rgba(255, 255, 255, 0.7);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  z-index: 2;
-}
-
-.promo-close:hover {
-  background: rgba(255, 255, 255, 0.16);
-  color: var(--color-white);
-}
-
 .promo-left {
   display: flex;
   flex-direction: row;
diff --git a/webapp/src/components/app/ProjectSelector.vue b/webapp/src/components/app/ProjectSelector.vue
index 0cfa28a..d730af2 100644
--- a/webapp/src/components/app/ProjectSelector.vue
+++ b/webapp/src/components/app/ProjectSelector.vue
@@ -578,10 +578,6 @@ onMounted(() => loadProjects());
         </div>
       </template>
     </main>
-
-    <div class="vpn-banner-full">
-      <VpnBanner :dismissible="false" />
-    </div>
   </div>
 
   <BaseModal
@@ -607,6 +603,9 @@ onMounted(() => loadProjects());
       />
     </template>
   </BaseModal>
+  <div class="vpn-banner-full">
+    <VpnBanner :dismissible="false" />
+  </div>
 </template>
 
 <style scoped>
diff --git a/webapp/src/components/profile/ProfileSettingsForm.vue b/webapp/src/components/profile/ProfileSettingsForm.vue
index 63c22d4..8276187 100644
--- a/webapp/src/components/profile/ProfileSettingsForm.vue
+++ b/webapp/src/components/profile/ProfileSettingsForm.vue
@@ -9,12 +9,15 @@ import BaseButton from "../ui/BaseButton.vue";
 import FormField from "../ui/FormField.vue";
 import BaseInput from "../ui/BaseInput.vue";
 import { useToast } from "../../composables/useToast";
+import { useAdsStore } from "../../stores/adsStore.ts";
 
 const router = useRouter();
 const authStore = useAuthStore();
 const onboardingStore = useOnboardingStore();
+const adsStore = useAdsStore();
 const toast = useToast();
 const user = computed(() => authStore.user);
+const isAdmin = computed(() => user.value?.role === "ROLE_ADMIN");
 
 const replayOnboarding = async () => {
   await router.push({ name: "app-main" });
@@ -86,7 +89,9 @@ const save = async () => {
   }
 };
 
-onMounted(resetForm);
+onMounted(() => {
+  resetForm();
+});
 </script>
 
 <template>
@@ -160,6 +165,24 @@ onMounted(resetForm);
         label="Revoir le tutoriel de bienvenue"
       />
     </div>
+
+    <div v-if="isAdmin" class="ads-section">
+      <div class="ads-info">
+        <h3>Publicités</h3>
+        <p>Affiche ou masque les bannières partenaires sur l'application.</p>
+      </div>
+      <label class="toggle-switch">
+        <input
+          type="checkbox"
+          :checked="adsStore.isEnabled"
+          aria-label="Afficher les publicités"
+          @change="adsStore.toggle"
+        />
+        <span class="toggle-track">
+          <span class="toggle-thumb"></span>
+        </span>
+      </label>
+    </div>
   </div>
 </template>
 
@@ -242,6 +265,78 @@ onMounted(resetForm);
   font-size: 0.85rem;
 }
 
+/* ── Publicités (admin) ── */
+.ads-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding-top: 24px;
+  border-top: 1px solid var(--color-border-secondary);
+}
+
+.ads-info h3 {
+  margin: 0 0 4px;
+  color: var(--color-white);
+  font-size: 1rem;
+}
+
+.ads-info p {
+  margin: 0;
+  color: var(--color-white-light);
+  opacity: 0.7;
+  font-size: 0.85rem;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.toggle-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-track {
+  display: inline-flex;
+  align-items: center;
+  width: 46px;
+  height: 26px;
+  padding: 3px;
+  background: var(--color-bg-secondary-dark);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 999px;
+  transition: all 0.2s ease;
+}
+
+.toggle-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--color-white-light);
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.toggle-switch input:checked + .toggle-track {
+  background: var(--color-accent3);
+  border-color: var(--color-accent3);
+}
+
+.toggle-switch input:checked + .toggle-track .toggle-thumb {
+  background: var(--color-white);
+  transform: translateX(20px);
+}
+
+.toggle-switch input:focus-visible + .toggle-track {
+  outline: 2px solid var(--color-accent3-hover);
+  outline-offset: 2px;
+}
+
 @media (max-width: 768px) {
   .form-row {
     grid-template-columns: 1fr;
@@ -250,5 +345,11 @@ onMounted(resetForm);
   .settings-card {
     padding: 24px;
   }
+
+  .tutorial-section,
+  .ads-section {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 </style>
diff --git a/webapp/src/stores/adsStore.ts b/webapp/src/stores/adsStore.ts
new file mode 100644
index 0000000..f79d90d
--- /dev/null
+++ b/webapp/src/stores/adsStore.ts
@@ -0,0 +1,33 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+const STORAGE_KEY = "display-ads";
+
+export const useAdsStore = defineStore("ads", () => {
+  const isEnabled = ref(localStorage.getItem(STORAGE_KEY) !== "false");
+
+  const enable = () => {
+    isEnabled.value = true;
+    localStorage.setItem(STORAGE_KEY, "true");
+  };
+
+  const disable = () => {
+    isEnabled.value = false;
+    localStorage.setItem(STORAGE_KEY, "false");
+  };
+
+  const toggle = () => {
+    if (isEnabled.value) {
+      disable();
+    } else {
+      enable();
+    }
+  };
+
+  return {
+    isEnabled,
+    enable,
+    disable,
+    toggle,
+  };
+});
diff --git a/webapp/src/styles/base.css b/webapp/src/styles/base.css
index 4a02f38..b91f76e 100644
--- a/webapp/src/styles/base.css
+++ b/webapp/src/styles/base.css
@@ -302,9 +302,4 @@ input[type="submit"]:disabled {
   padding: 40px 24px;
   max-width: 1200px;
   width: 100%;
-  min-height: calc(100vh - (88px + 90px));
 }
-
-.page-container.no-ad-gap {
-  padding-bottom: 80px;
-}
\ No newline at end of file