From 83020dcb5ba39a8d7024ccd0978871681199cee0 Mon Sep 17 00:00:00 2001
From: yolou <seri-khane.yolou@etu.u-pec.fr>
Date: Thu, 19 Mar 2026 14:37:08 +0100
Subject: [PATCH] charte graphique

---
 parcoursup/app.riot                    |  84 +--
 parcoursup/components/detail-view.riot | 144 ++++-
 parcoursup/index.html                  |  16 +-
 parcoursup/style.css                   | 714 +++++++++++++++++++------
 4 files changed, 753 insertions(+), 205 deletions(-)

diff --git a/parcoursup/app.riot b/parcoursup/app.riot
index f12f713..3ba175f 100644
--- a/parcoursup/app.riot
+++ b/parcoursup/app.riot
@@ -1,44 +1,22 @@
 <app>
-  <div class="page">
-    <h1>Open Data Parcoursup</h1>
-    <p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
+  <header class="site-header">
+    <div class="header-inner">
+      <div class="logo">
+        <span class="logo-icon"></span>
+        <span class="logo-text">Parcoursup <span class="logo-light">Explorer</span></span>
+      </div>
+      <div class="header-badge" if={ state.selectedFormations.length > 0 }>
+        { state.selectedFormations.length } sélection(s)
+      </div>
+    </div>
+  </header>
 
-    <p><b>{ state.selectedFormations.length }</b> formation(s) sélectionnée(s)</p>
+  <div class="page">
 
     <div if={ !state.selected }>
       <search-bar onsearch={ launchSearch }></search-bar>
 
-      <p if={ state.hasSearched && !state.loading }>
-        <b>{ state.query }</b> : { state.total } résultat(s)
-      </p>
-
-      <div class="layout">
-        <div>
-          <result-list
-            results={ state.results }
-            hasSearched={ state.hasSearched }
-            loading={ state.loading }
-            ondetail={ showDetail }
-            onselect={ addToSelection }>
-          </result-list>
-
-          <div class="compare-controls" if={ state.total > state.limit }>
-            <button onclick={ previousPage } disabled={ state.page === 1 }>
-              Précédent
-            </button>
-
-            <p>Page { state.page } / { getTotalPages() }</p>
-
-            <button onclick={ nextPage } disabled={ state.page === getTotalPages() }>
-              Suivant
-            </button>
-          </div>
-        </div>
-
-        <map-view results={ state.results }></map-view>
-      </div>
-
-      <div class="detail-card" if={ state.selectedFormations.length > 0 }>
+      <div class="detail-card comparateur-card" if={ state.selectedFormations.length > 0 }>
         <h3>Comparateur</h3>
 
         <p>Choisis ton profil pour comparer les formations sélectionnées.</p>
@@ -75,7 +53,7 @@
           </div>
         </div>
 
-        <button onclick={ clearSelection }>Vider la sélection</button>
+        <button class="btn btn-danger" onclick={ clearSelection }>Vider la sélection</button>
 
         <hr />
 
@@ -102,11 +80,41 @@
             </span>
           </p>
 
-          <button onclick={ () => removeFromSelection(f.id) }>
+          <button class="btn btn-small btn-outline" onclick={ () => removeFromSelection(f.id) }>
             Retirer
           </button>
         </div>
       </div>
+
+      <p class="result-count" if={ state.hasSearched && !state.loading }>
+        <b>{ state.query }</b> — { state.total } résultat(s)
+      </p>
+
+      <map-view results={ state.results }></map-view>
+
+      <div class="layout">
+        <div>
+          <result-list
+            results={ state.results }
+            hasSearched={ state.hasSearched }
+            loading={ state.loading }
+            ondetail={ showDetail }
+            onselect={ addToSelection }>
+          </result-list>
+
+          <div class="pagination" if={ state.total > state.limit }>
+            <button class="btn btn-outline" onclick={ previousPage } disabled={ state.page === 1 }>
+              ← Précédent
+            </button>
+
+            <span class="page-info">Page { state.page } / { getTotalPages() }</span>
+
+            <button class="btn btn-outline" onclick={ nextPage } disabled={ state.page === getTotalPages() }>
+              Suivant →
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div if={ state.selected }>
@@ -325,4 +333,4 @@
       }
     }
   </script>
-</app>
\ No newline at end of file
+</app>
diff --git a/parcoursup/components/detail-view.riot b/parcoursup/components/detail-view.riot
index cffa2bb..82258d4 100644
--- a/parcoursup/components/detail-view.riot
+++ b/parcoursup/components/detail-view.riot
@@ -148,6 +148,146 @@
       </tbody>
     </table>
 
-    <button onclick={ () => props.onback() }>Retour</button>
+    <!-- ===================== GRAPHIQUES CHARTS.CSS ===================== -->
+
+    <h2 class="charts-heading">Profil des admis</h2>
+
+    <div class="charts-section">
+
+      <!-- Graphique 1 : Répartition par type de bac -->
+      <div class="chart-wrapper">
+        <h3>Répartition par type de bac</h3>
+
+        <div id="chart-bac">
+          <table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">
+            <thead>
+              <tr>
+                <th scope="col">Type</th>
+                <th scope="col">Pourcentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">Général</th>
+                <td style="--size: { safe(props.formation.pctGeneral) }; --color: #3d7fff;">
+                  <span class="data">{ props.formation.pctGeneral || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Techno</th>
+                <td style="--size: { safe(props.formation.pctTechno) }; --color: #f59e0b;">
+                  <span class="data">{ props.formation.pctTechno || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Pro</th>
+                <td style="--size: { safe(props.formation.pctPro) }; --color: #10b981;">
+                  <span class="data">{ props.formation.pctPro || 0 }%</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Graphique 2 : Mentions au bac -->
+      <div class="chart-wrapper">
+        <h3>Mentions au bac des admis</h3>
+
+        <div id="chart-mentions">
+          <table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-10">
+            <thead>
+              <tr>
+                <th scope="col">Mention</th>
+                <th scope="col">Pourcentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">Sans</th>
+                <td style="--size: { safe(props.formation.pctSansMention) }; --color: #94a3b8;">
+                  <span class="data">{ props.formation.pctSansMention || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">AB</th>
+                <td style="--size: { safe(props.formation.pctAB) }; --color: #60a5fa;">
+                  <span class="data">{ props.formation.pctAB || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Bien</th>
+                <td style="--size: { safe(props.formation.pctB) }; --color: #34d399;">
+                  <span class="data">{ props.formation.pctB || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">TB</th>
+                <td style="--size: { safe(props.formation.pctTB) }; --color: #fbbf24;">
+                  <span class="data">{ props.formation.pctTB || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">TB Féli.</th>
+                <td style="--size: { safe(props.formation.pctTBF) }; --color: #f472b6;">
+                  <span class="data">{ props.formation.pctTBF || 0 }%</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Graphique 3 : Profil sociologique (barres horizontales, pleine largeur) -->
+      <div class="chart-wrapper chart-full">
+        <h3>Profil sociologique</h3>
+
+        <div id="chart-profil">
+          <table class="charts-css bar show-labels show-primary-axis show-4-secondary-axes data-spacing-14">
+            <thead>
+              <tr>
+                <th scope="col">Catégorie</th>
+                <th scope="col">Pourcentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">Femmes</th>
+                <td style="--size: { safe(props.formation.pctFemmes) }; --color: #a78bfa;">
+                  <span class="data">{ props.formation.pctFemmes || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Boursiers</th>
+                <td style="--size: { safe(props.formation.pctBoursiers) }; --color: #fb923c;">
+                  <span class="data">{ props.formation.pctBoursiers || 0 }%</span>
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Néo-bac</th>
+                <td style="--size: { safe(props.formation.pctNeoBac) }; --color: #2dd4bf;">
+                  <span class="data">{ props.formation.pctNeoBac || 0 }%</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div>
+
+    <button onclick={ () => props.onback() } class="btn-retour">Retour à la liste</button>
   </div>
-</detail-view>
\ No newline at end of file
+
+  <script>
+    export default {
+      safe(val) {
+        if (val === null || val === undefined || isNaN(val)) return 0
+        var v = val / 100
+        if (v > 1) return 1
+        if (v < 0) return 0
+        return Math.round(v * 100) / 100
+      }
+    }
+  </script>
+</detail-view>
diff --git a/parcoursup/index.html b/parcoursup/index.html
index ffe77b9..a614ea9 100644
--- a/parcoursup/index.html
+++ b/parcoursup/index.html
@@ -3,23 +3,23 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Parcoursup Riot</title>
-  
+    <title>Parcoursup Explorer</title>
+
     <link rel="stylesheet" href="./style.css" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-  
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css" />
+
     <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-  
   </head>
 <body>
   <app></app>
 
   <script src="./components/search-bar.riot" type="riot"></script>
-<script src="./components/result-list.riot" type="riot"></script>
-<script src="./components/detail-view.riot" type="riot"></script>
-<script src="./components/map-view.riot" type="riot"></script>
-<script src="./app.riot" type="riot"></script>
+  <script src="./components/result-list.riot" type="riot"></script>
+  <script src="./components/detail-view.riot" type="riot"></script>
+  <script src="./components/map-view.riot" type="riot"></script>
+  <script src="./app.riot" type="riot"></script>
 
   <script type="module">
     import { fetchFormations } from './api.js'
diff --git a/parcoursup/style.css b/parcoursup/style.css
index 9164398..3f221b4 100644
--- a/parcoursup/style.css
+++ b/parcoursup/style.css
@@ -1,244 +1,644 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    background: #f5f5f5;
-    color: #222;
+/* ============================================================
+   PARCOURSUP EXPLORER — Charte Parcoursup officielle
+   ============================================================ */
+
+   :root {
+    --vert: #1a936f;
+    --vert-fonce: #147a5c;
+    --vert-clair: #e8f5ef;
+    --bleu: #2a5298;
+    --bleu-clair: #eaf0fa;
+    --orange: #e67e22;
+    --rouge: #c0392b;
+    --gris-50: #f9fafb;
+    --gris-100: #f3f4f6;
+    --gris-200: #e5e7eb;
+    --gris-300: #d1d5db;
+    --gris-500: #6b7280;
+    --gris-700: #374151;
+    --gris-900: #111827;
+    --rayon: 6px;
   }
   
+  /* --- Reset & base --- */
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: 'Marianne', 'Segoe UI', system-ui, -apple-system, sans-serif;
+    margin: 0;
+    background: var(--gris-50);
+    color: var(--gris-900);
+    line-height: 1.6;
+    font-size: 15px;
+  }
+  
+  /* ===========================================================
+     HEADER — Bandeau Parcoursup
+     =========================================================== */
+  
+  .site-header {
+    background: white;
+    border-bottom: 3px solid var(--vert);
+    padding: 0 24px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  }
+  
+  .header-inner {
+    max-width: 1100px;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  .logo-icon {
+    font-size: 22px;
+  }
+  
+  .logo-text {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--vert);
+    letter-spacing: -0.3px;
+  }
+  
+  .logo-light {
+    font-weight: 400;
+    color: var(--gris-700);
+  }
+  
+  .header-badge {
+    background: var(--vert-clair);
+    color: var(--vert-fonce);
+    padding: 4px 14px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 600;
+    border: 1px solid #b8e0cd;
+  }
+  
+  /* ===========================================================
+     PAGE
+     =========================================================== */
+  
   .page {
     max-width: 1100px;
     margin: 0 auto;
-    padding: 20px;
+    padding: 24px 20px 40px;
   }
   
-  h1 {
-    margin-bottom: 8px;
+  /* ===========================================================
+     BOUTONS
+     =========================================================== */
+  
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 600;
+    border: none;
+    border-radius: var(--rayon);
+    cursor: pointer;
+    transition: all 0.15s;
   }
   
-  .subtitle {
-    margin-top: 0;
-    color: #555;
+  .btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
   }
   
+  .btn-primary {
+    background: var(--vert);
+    color: white;
+  }
+  .btn-primary:hover:not(:disabled) {
+    background: var(--vert-fonce);
+  }
+  
+  .btn-outline {
+    background: white;
+    color: var(--vert);
+    border: 1.5px solid var(--vert);
+  }
+  .btn-outline:hover:not(:disabled) {
+    background: var(--vert-clair);
+  }
+  
+  .btn-danger {
+    background: #fef2f2;
+    color: var(--rouge);
+    border: 1px solid #f5c6cb;
+  }
+  .btn-danger:hover {
+    background: #fde8e8;
+  }
+  
+  .btn-small {
+    padding: 5px 12px;
+    font-size: 13px;
+  }
+  
+  /* ===========================================================
+     SEARCH BAR
+     =========================================================== */
+  
   .search-bar {
     display: flex;
     gap: 10px;
-    margin: 20px 0;
+    margin: 0 0 20px;
   }
   
   .search-bar input {
     flex: 1;
-    padding: 10px;
-    font-size: 16px;
+    padding: 10px 14px;
+    font-size: 15px;
+    border: 1.5px solid var(--gris-300);
+    border-radius: var(--rayon);
+    background: white;
+    outline: none;
+    transition: border-color 0.2s;
   }
   
-  .search-bar button,
-  .card button,
-  .detail-card button {
-    padding: 10px 14px;
-    font-size: 14px;
-    cursor: pointer;
+  .search-bar input:focus {
+    border-color: var(--vert);
+    box-shadow: 0 0 0 2px rgba(26, 147, 111, 0.12);
   }
   
+  .search-bar button {
+    padding: 10px 22px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    background: var(--vert);
+    color: white;
+    border: none;
+    border-radius: var(--rayon);
+    transition: background 0.15s;
+  }
+  
+  .search-bar button:hover {
+    background: var(--vert-fonce);
+  }
+  
+  /* ===========================================================
+     RESULT COUNT
+     =========================================================== */
+  
+  .result-count {
+    font-size: 14px;
+    color: var(--gris-500);
+    margin: 0 0 14px;
+  }
+  
+  /* ===========================================================
+     CARDS — Résultats + comparateur items
+     =========================================================== */
+  
+  .card {
+    background: white;
+    padding: 18px 20px;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+    transition: border-color 0.15s;
+  }
+  
+  .card:hover {
+    border-color: var(--vert);
+  }
+  
+  .card h3, .card h4 {
+    margin-top: 0;
+    margin-bottom: 6px;
+    color: var(--bleu);
+    font-size: 1rem;
+  }
+  
+  .card p {
+    margin: 4px 0;
+    font-size: 14px;
+    color: var(--gris-700);
+  }
+  
+  .card button {
+    margin-top: 10px;
+    padding: 6px 14px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: var(--rayon);
+    border: 1.5px solid var(--vert);
+    background: white;
+    color: var(--vert);
+    transition: all 0.15s;
+  }
+  
+  .card button:hover {
+    background: var(--vert-clair);
+  }
+  
+  .card button + button {
+    margin-left: 8px;
+  }
+  
+  /* ===========================================================
+     DETAIL CARD — Comparateur
+     =========================================================== */
+  
+  .detail-card {
+    background: white;
+    padding: 22px 24px;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+    margin-bottom: 20px;
+  }
+  
+  .detail-card hr {
+    margin: 18px 0;
+    border: none;
+    border-top: 1px solid var(--gris-200);
+  }
+  
+  .detail-card h2, .detail-card h3 {
+    margin-top: 0;
+    color: var(--gris-900);
+  }
+  
+  .detail-card p {
+    margin: 6px 0;
+    color: var(--gris-700);
+  }
+  
+  .comparateur-card {
+    border-left: 4px solid var(--vert);
+  }
+  
+  /* ===========================================================
+     COMPARE CONTROLS
+     =========================================================== */
+  
+  .compare-controls {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 14px;
+    align-items: flex-end;
+  }
+  
+  .compare-controls label {
+    font-size: 13px;
+    color: var(--gris-500);
+    font-weight: 600;
+  }
+  
+  .compare-controls input,
+  .compare-controls select {
+    padding: 8px 12px;
+    font-size: 14px;
+    min-width: 130px;
+    border: 1.5px solid var(--gris-300);
+    border-radius: var(--rayon);
+    background: white;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+  
+  .compare-controls input:focus,
+  .compare-controls select:focus {
+    border-color: var(--vert);
+  }
+  
+  /* ===========================================================
+     PAGINATION
+     =========================================================== */
+  
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    margin: 20px 0;
+  }
+  
+  .page-info {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--gris-500);
+  }
+  
+  /* ===========================================================
+     BADGES ESTIMATION
+     =========================================================== */
+  
+  .estimate {
+    display: inline-block;
+    padding: 3px 12px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 700;
+  }
+  
+  .favorable {
+    background: var(--vert-clair);
+    color: var(--vert-fonce);
+    border: 1px solid #a3d9c0;
+  }
+  
+  .possible {
+    background: #fef9e7;
+    color: #b7791f;
+    border: 1px solid #f6e05e;
+  }
+  
+  .difficile {
+    background: #fef2f2;
+    color: var(--rouge);
+    border: 1px solid #f5c6cb;
+  }
+  
+  /* ===========================================================
+     LAYOUT
+     =========================================================== */
+  
   .layout {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 20px;
+    gap: 16px;
   }
   
   .results {
     display: grid;
-    gap: 16px;
+    gap: 12px;
   }
   
-  .card {
-    border: 1px solid #d8d8d8;
-    background: white;
+  /* ===========================================================
+     MESSAGE (loading / no result)
+     =========================================================== */
+  
+  .message {
     padding: 16px;
-    border-radius: 8px;
-  }
-  
-  .card h3 {
-    margin-top: 0;
-  }
-  
-  .detail-card {
-    border: 1px solid #d8d8d8;
     background: white;
-    padding: 20px;
-    border-radius: 8px;
-  }
-
-  .detail-card hr {
-    margin: 18px 0;
-    border: none;
-    border-top: 1px solid #ddd;
-  }
-
-  .compare-controls {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-    margin-bottom: 15px;
+    border: 1px solid var(--gris-200);
+    border-radius: var(--rayon);
+    text-align: center;
+    color: var(--gris-500);
   }
   
-  .compare-controls input,
-  .compare-controls select {
-    padding: 8px;
-    font-size: 14px;
-    min-width: 140px;
-  }
+  /* ===========================================================
+     MAP
+     =========================================================== */
   
-  .detail-card h2,
-  .detail-card h3 {
-    margin-top: 0;
-  }
-  
-  .detail-card p {
-    margin: 8px 0;
-  }
-
   .map-box {
     overflow: hidden;
-  }
-  
-  .estimate {
-    display: inline-block;
-    padding: 4px 10px;
-    border-radius: 999px;
-    font-weight: bold;
-    margin-left: 6px;
-  }
-  
-  .favorable {
-    background: #d9f7e8;
-    color: #146c43;
-    border: 1px solid #9ed8b8;
-  }
-  
-  .possible {
-    background: #fff3cd;
-    color: #8a6d1d;
-    border: 1px solid #eed58f;
-  }
-  
-  .difficile {
-    background: #f8d7da;
-    color: #842029;
-    border: 1px solid #e4aeb5;
-  }
-  
-  .map {
-    height: 420px;
-    width: 100%;
-    border-radius: 6px;
-  }
-  
-  .compare-controls {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-    margin-bottom: 15px;
-  }
-  
-  .compare-controls input,
-  .compare-controls select {
-    padding: 8px;
-    font-size: 14px;
-    min-width: 140px;
-  }
-
-  .message {
-    padding: 12px;
-    background: white;
-    border: 1px solid #d8d8d8;
-    border-radius: 8px;
-  }
-
-  .chart-container {
-    margin-top: 15px;
-  }
-  
-  .chart-title {
-    margin: 10px 0;
-    font-weight: bold;
-  }
-  
-  .detail-page {
-    background: #f5f5f5;
-  }
-  
-  .formation-title {
-    color: #3d4fff;
-    font-size: 2rem;
-    line-height: 1.15;
     margin-bottom: 20px;
   }
   
+  .map-box h3 {
+    margin: 0 0 8px;
+    font-size: 0.95rem;
+    color: var(--gris-700);
+  }
+  
+  .map {
+    height: 400px;
+    width: 100%;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+  }
+  
+  /* ===========================================================
+     DETAIL VIEW — Fiche formation
+     =========================================================== */
+  
+  .detail-page {
+    background: transparent;
+  }
+  
+  .formation-title {
+    color: var(--bleu);
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 1.25;
+    margin-bottom: 16px;
+  }
+  
+  .formation-meta {
+    background: white;
+    padding: 18px 22px;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+    margin-bottom: 24px;
+  }
+  
   .formation-meta p {
-    margin: 8px 0;
-    font-size: 1.1rem;
+    margin: 5px 0;
+    font-size: 14px;
+    color: var(--gris-700);
   }
   
   .detail-grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
-    gap: 40px;
+    gap: 24px;
     align-items: start;
-    margin-top: 20px;
-    margin-bottom: 30px;
+    margin-top: 8px;
+    margin-bottom: 28px;
   }
   
+  /* --- Tableaux --- */
   .detail-table {
     width: 100%;
     border-collapse: collapse;
     background: white;
+    border-radius: var(--rayon);
+    overflow: hidden;
   }
   
   .detail-table th,
   .detail-table td {
-    border: 1px solid #d7d7d7;
-    padding: 14px 12px;
+    border: 1px solid var(--gris-200);
+    padding: 10px 12px;
     text-align: left;
+    font-size: 14px;
   }
   
-  .detail-table th {
-    background: #fafafa;
-    font-size: 1.05rem;
+  .detail-table thead th {
+    background: var(--gris-100);
+    font-weight: 700;
+    color: var(--gris-700);
+    font-size: 13px;
   }
   
   .total-row td {
-    font-weight: bold;
+    font-weight: 700;
+    background: var(--gris-100);
   }
   
+  /* --- Timeline --- */
   .timeline-box {
-    padding-top: 10px;
+    background: white;
+    padding: 18px 22px;
+    border-radius: var(--rayon);
+    border: 1px solid var(--gris-200);
+  }
+  
+  .timeline-box h3 {
+    margin-top: 0;
+    color: var(--gris-900);
   }
   
   .timeline {
     position: relative;
-    margin-top: 30px;
-    padding-left: 30px;
-    border-left: 2px solid #d9d9d9;
+    margin-top: 20px;
+    padding-left: 26px;
+    border-left: 3px solid #b8e0cd;
   }
   
   .timeline-item {
     position: relative;
-    margin-bottom: 45px;
+    margin-bottom: 32px;
   }
   
   .timeline-dot {
     position: absolute;
-    left: -39px;
-    top: 6px;
-    width: 14px;
-    height: 14px;
-    background: #21c8b4;
+    left: -35px;
+    top: 5px;
+    width: 12px;
+    height: 12px;
+    background: var(--vert);
     border-radius: 50%;
+    border: 3px solid var(--vert-clair);
   }
   
+  /* ===========================================================
+     CHARTS CSS
+     =========================================================== */
+  
+  .charts-heading {
+    margin-top: 32px;
+    margin-bottom: 4px;
+    color: var(--gris-900);
+  }
+  
+  .charts-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin: 16px 0 28px;
+  }
+  
+  .chart-wrapper {
+    background: white;
+    border: 1px solid var(--gris-200);
+    border-radius: var(--rayon);
+    padding: 18px 20px 14px;
+  }
+  
+  .chart-wrapper h3 {
+    margin: 0 0 14px;
+    font-size: 0.9rem;
+    color: var(--gris-700);
+    font-weight: 600;
+  }
+  
+  .chart-full {
+    grid-column: 1 / -1;
+  }
+  
+  #chart-bac .column,
+  #chart-mentions .column {
+    height: 240px;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+  
+  #chart-profil .bar {
+    height: 170px;
+    max-width: 560px;
+    margin: 0;
+  }
+  
+  #chart-profil .bar th {
+    width: 85px;
+    font-size: 13px;
+  }
+  
+  .chart-wrapper .data {
+    font-size: 11px;
+    font-weight: 700;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
+  }
+  
+  /* --- Bouton retour --- */
+  .btn-retour {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin: 12px 0 28px;
+    padding: 9px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    background: var(--vert);
+    color: white;
+    border: none;
+    border-radius: var(--rayon);
+    transition: background 0.15s;
+  }
+  
+  .btn-retour:hover {
+    background: var(--vert-fonce);
+  }
+  
+  /* ===========================================================
+     RESPONSIVE
+     =========================================================== */
+  
   @media (max-width: 900px) {
     .detail-grid {
       grid-template-columns: 1fr;
     }
+  }
+  
+  @media (max-width: 700px) {
+    .charts-section {
+      grid-template-columns: 1fr;
+    }
+  
+    .site-header {
+      padding: 0 14px;
+    }
+  
+    .logo-text {
+      font-size: 16px;
+    }
+  
+    .page {
+      padding: 16px 12px 30px;
+    }
+  
+    .search-bar {
+      flex-direction: column;
+    }
+  
+    .search-bar button {
+      width: 100%;
+    }
   }
\ No newline at end of file