Ajout tableau

elements/footer.php

@@ -40,6 +40,9 @@ if ($toast !== null) {
             <a href="https://git.eldorianet.work/esteban" target="_blank" rel="noopener noreferrer">Git</a>
             <span class="discord-handle" title="@ours1" onclick="alert('Discord : @ours1')">Discord</span>
             <a href="../pages/presentation.php">Mode présentation</a>
+            <!-- Le tableau de synthèse E4 est affiché dans le site (voir pages/synthese.php),
+                 avec un bouton plein écran et un bouton de téléchargement au-dessus de l'aperçu -->
+            <a href="../pages/synthese.php">Tableau de synthèse Oral</a>
             <a href="../pages/cgu.php">CGU</a>
         </div>
     </div>

pages/synthese.php

@@ -0,0 +1,66 @@
+<?php
+
+// Page du tableau de synthèse (épreuve E4 du BTS SIO), affiché directement dans le site.
+// Le PDF est un fichier statique du dépôt (dossier documents/), pas un PDF stocké en base
+// comme ceux des projets/expériences : il n'y en a qu'un seul et il ne change quasiment
+// jamais, une table dédiée n'apporterait rien ici.
+
+// Titre de l'onglet
+$pageTitle = 'Tableau de synthèse';
+
+// Description pour le SEO et les aperçus de partage
+$pageDescription = 'Tableau de synthèse des réalisations professionnelles d\'Esteban MOUSSU, épreuve E4 du BTS SIO option SISR.';
+
+// On ajoute ici le header
+require_once('./../elements/header.php');
+
+// Chemin du PDF, écrit une seule fois : il sert à la fois à l'aperçu et au bouton
+// d'ouverture en plein écran juste en dessous
+$cheminPdf = '../documents/tableau-de-synthese-e4.pdf';
+?>
+
+<div class="page-header">
+    <h1>Tableau de synthèse</h1>
+    <p>Réalisations professionnelles présentées à l'épreuve E4 du BTS SIO, option SISR.</p>
+</div>
+
+<div class="synthese-page">
+
+    <!-- Barre au-dessus de l'aperçu : rappel du document et sorties possibles.
+         Le tableau est dense (en-têtes de colonnes en texte vertical), donc on met en
+         avant l'ouverture plein écran, qui donne le zoom de la visionneuse du navigateur -->
+    <div class="pdf-viewer-toolbar">
+        <span><i class="fa-solid fa-file-pdf"></i> Tableau de synthèse E4 (PDF, 1 page)</span>
+        <span class="synthese-actions">
+            <!-- Une seule action mise en avant : l'ouverture plein écran, celle qui rend
+                 vraiment le tableau lisible. Le téléchargement reste en bouton discret,
+                 même style que sur les fiches projets (voir pages/details.php) -->
+            <a class="btn btn-primary pdf-download-btn" href="<?php echo $cheminPdf; ?>" target="_blank" rel="noopener noreferrer">
+                <i class="fa-solid fa-up-right-from-square"></i> Plein écran
+            </a>
+            <a class="btn btn-ghost pdf-download-btn" href="<?php echo $cheminPdf; ?>" download>
+                <i class="fa-solid fa-download"></i> Télécharger
+            </a>
+        </span>
+    </div>
+
+    <!-- Aperçu intégré. L'attribut title sert aux lecteurs d'écran, et le contenu de
+         secours s'affiche si le navigateur ne sait pas afficher un PDF dans une iframe
+         (c'est le cas de plusieurs navigateurs mobiles) -->
+    <!-- #view=FitH ajuste le document à la largeur, pagemode=none masque le panneau de
+         vignettes qui mange la moitié de la place sur un écran étroit (respecté par
+         Firefox, ignoré sans dommage par les autres) -->
+    <iframe class="pdf-viewer synthese-viewer" src="<?php echo $cheminPdf; ?>#view=FitH&amp;pagemode=none"
+        title="Tableau de synthèse des réalisations professionnelles, épreuve E4 du BTS SIO">
+        <p class="synthese-repli">
+            Ton navigateur ne peut pas afficher le PDF directement.
+            <a href="<?php echo $cheminPdf; ?>" target="_blank" rel="noopener noreferrer">Ouvre-le dans un nouvel onglet</a>.
+        </p>
+    </iframe>
+
+</div>
+
+<?php
+// Ajout du footer
+require_once('../elements/footer.php');
+?>

styles/primary_css.css

@@ -2735,3 +2735,52 @@ main {
     color: var(--accent-light);
     border-color: var(--accent-border);
 }
+
+/* ---- PAGE TABLEAU DE SYNTHÈSE ----
+   Le PDF est le contenu principal de la page : on lui donne plus de largeur et plus de
+   hauteur que l'aperçu inséré dans une fiche projet, parce que le tableau est dense et
+   qu'il devient vite illisible sur une petite surface */
+
+.synthese-page {
+    max-width: 1200px;
+    margin: 20px auto clamp(48px, 7vw, 72px);
+    padding: 0 clamp(14px, 4vw, 40px);
+}
+
+/* On réutilise .pdf-viewer-toolbar (voir plus haut) mais sans le trait de séparation
+   hérité de .pdf-viewer-wrap, qui n'a pas lieu d'être en haut de page */
+.synthese-page .pdf-viewer-toolbar {
+    margin-bottom: 14px;
+}
+
+.synthese-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.synthese-viewer {
+    height: 82vh;
+    min-height: 520px;
+}
+
+.synthese-repli {
+    color: var(--text-soft);
+    padding: 20px;
+}
+
+/* Sur mobile l'aperçu intégré d'un PDF est souvent inutilisable (plusieurs navigateurs
+   affichent juste une zone vide) : on le garde plus court, les deux boutons au-dessus
+   restant le vrai chemin d'accès au document */
+@media (max-width: 700px) {
+    .synthese-viewer {
+        height: 60vh;
+        min-height: 360px;
+    }
+
+    .synthese-page .pdf-viewer-toolbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}