tfe: wrap website iframe in overlay-style div with Site web badge, clearer link text

TODO.md

@@ -49,3 +49,4 @@
 - [x] Masquer le bloc "Durée" sur la page TFE quand aucune durée n'est encodée (ni pages ni minutes)
 - [x] Fix: locked_year cleared on edit — edit dialog didn't populate the field, so any edit cleared the locked academic year
 - [x] Fix repertoire Années column: sort reverse chronological (newest first) instead of ascending alpha
+- [x] TFE website embed: wrap iframe + button in overlay-style div with "Site web" pill badge on left corner, clearer link text

app/public/assets/css/tfe.css

@@ -70,7 +70,7 @@
   overflow: visible;
 }
 
-.tfe-file-item:has(.tfe-file-iframe) {
+.tfe-file-item:has(.tfe-website-wrapper) {
   min-height: 0;
   overflow: visible;
 }
@@ -118,22 +118,73 @@
   border: none;
 }
 
-.tfe-website-link {
+/* ── Website embed wrapper (like PDF overlay) ── */
+.tfe-website-wrapper {
+  position: relative;
+  width: 100%;
+  display: grid;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.tfe-website-badge {
+  position: absolute;
+  top: var(--space-xs);
+  left: var(--space-xs);
+  z-index: 2;
+  display: inline-block;
+  padding: 0.15em 0.6em;
+  font-size: var(--step--2);
+  font-weight: 500;
+  line-height: 1.4;
+  color: color-mix(in srgb, var(--accent-primary) 90%, #000);
+  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
+  border-radius: var(--radius);
+}
+
+.tfe-website-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  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-3xs);
+  gap: var(--space-2xs);
-  padding: var(--space-2xs) var(--space-xs);
+  padding: var(--space-xs) var(--space-m);
-  font-size: var(--step--1);
+  background: var(--accent-primary);
-  color: var(--accent-primary);
+  color: #fff;
-  text-decoration: none;
+  border: none;
-  border: 1px solid var(--border);
   border-radius: var(--radius);
-  margin-bottom: var(--space-2xs);
+  font-size: var(--step-0);
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
+  transition: transform 0.15s, box-shadow 0.15s;
 }
 
-.tfe-website-link:hover {
+.tfe-website-open-btn:hover {
-  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary));
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
+  background: var(--accent-primary);
+  color: #fff;
 }
 
 .tfe-file-item figcaption {

app/templates/public/tfe.php

@@ -388,18 +388,23 @@
                                  data-pdf-label="<?= htmlspecialchars($_pdfLabel) ?>"
                                  tabindex="-1"></div>
                         <?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-link"
+                                       class="tfe-website-open-btn"
                                        target="_blank"
                                        rel="noopener noreferrer">
-                                Ouvrir dans un nouvel onglet ↗
+                                        Ouvrir le site web ↗
                                     </a>
+                                </div>
                                 <iframe src="<?= $mediaUrl ?>"
                                         class="tfe-file-iframe"
                                         title="<?= $fileName ?>"
                                         sandbox="allow-scripts allow-same-origin"
                                         loading="lazy">
                                 </iframe>
+                            </div>
                         <?php elseif ($isImage): ?>
                             <img src="<?= $mediaUrl ?>"
                                  alt="<?= htmlspecialchars($caption !== '' ? $caption : $data['title'] . ' — ' . ($data['authors'] ?? '')) ?>"