From 3e3d829d11a629d8a6041bc10344bbdf34479a75 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Fri, 10 Jul 2026 15:18:07 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20website=20iframe=20overlay=20=E2=80=94?=
 =?UTF-8?q?=20icon=20button=20bottom-right,=20no=20blur,=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO.md                       |  1 +
 app/public/assets/css/tfe.css | 32 ++++++++------------------------
 app/templates/public/tfe.php  | 16 ++++++++--------
 3 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/TODO.md b/TODO.md
index 8120b73..3ccf568 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,3 +1,4 @@
 # TODO
 
 - [x] Fix CSP: add `frame-src` to allow iframes from `videos.erg.be` and `depnum.happyngreen.fr`
+- [x] Website iframe overlay: remove blur, move button to bottom-right, replace text with SVG icon + tooltip
diff --git a/app/public/assets/css/tfe.css b/app/public/assets/css/tfe.css
index 71f3086..11f40ee 100644
--- a/app/public/assets/css/tfe.css
+++ b/app/public/assets/css/tfe.css
@@ -145,44 +145,28 @@
   border-radius: var(--radius);
 }
 
-.tfe-website-overlay {
+.tfe-website-open-btn {
   position: absolute;
-  inset: 0;
-  z-index: 1;
+  bottom: var(--space-xs);
+  right: var(--space-xs);
+  z-index: 2;
   display: grid;
   place-items: center;
-  background: rgb(0 0 0 / 0.12);
-  backdrop-filter: blur(4px) saturate(0.6);
-  transition: background 0.2s;
-  pointer-events: none;
-}
-
-.tfe-website-overlay:hover {
-  background: rgb(0 0 0 / 0.06);
-}
-
-.tfe-website-open-btn {
-  pointer-events: auto;
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: center;
-  gap: var(--space-2xs);
-  padding: var(--space-xs) var(--space-m);
+  width: 40px;
+  height: 40px;
   background: var(--accent-primary);
   color: #fff;
   border: none;
   border-radius: var(--radius);
-  font-size: var(--step-0);
-  font-weight: 500;
   text-decoration: none;
   cursor: pointer;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
   transition: transform 0.15s, box-shadow 0.15s;
 }
 
 .tfe-website-open-btn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
   background: var(--accent-primary);
   color: #fff;
 }
diff --git a/app/templates/public/tfe.php b/app/templates/public/tfe.php
index f8c3f0c..177f590 100644
--- a/app/templates/public/tfe.php
+++ b/app/templates/public/tfe.php
@@ -390,14 +390,14 @@
                         <?php elseif ($isWebsite): ?>
                             <div class="tfe-website-wrapper">
                                 <span class="tfe-website-badge">Site web</span>
-                                <div class="tfe-website-overlay">
-                                    <a href="<?= $mediaUrl ?>"
-                                       class="tfe-website-open-btn"
-                                       target="_blank"
-                                       rel="noopener noreferrer">
-                                        Ouvrir le site web ↗
-                                    </a>
-                                </div>
+                                <a href="<?= $mediaUrl ?>"
+                                   class="tfe-website-open-btn"
+                                   target="_blank"
+                                   rel="noopener noreferrer"
+                                   title="Ouvrir le site web dans un nouvel onglet"
+                                   aria-label="Ouvrir le site web">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg>
+                                </a>
                                 <iframe src="<?= $mediaUrl ?>"
                                         class="tfe-file-iframe"
                                         title="<?= $fileName ?>"