From 4b4a47abfcadc9b136ad6d53b22f233e884ff9d7 Mon Sep 17 00:00:00 2001
From: sehl <aylane.sehl@iut-fbleau.fr>
Date: Tue, 31 Mar 2026 17:58:49 +0200
Subject: [PATCH] maj

---
 parcoursup/app.riot                    |  38 +-
 parcoursup/components/detail-view.riot |   4 +-
 parcoursup/components/map-view.riot    | 113 +--
 parcoursup/components/result-list.riot |   8 +-
 parcoursup/components/search-bar.riot  |   2 +-
 parcoursup/index.html                  |  28 +-
 parcoursup/style.css                   | 998 +++----------------------
 7 files changed, 166 insertions(+), 1025 deletions(-)

diff --git a/parcoursup/app.riot b/parcoursup/app.riot
index cd7d791..26c4cbb 100644
--- a/parcoursup/app.riot
+++ b/parcoursup/app.riot
@@ -1,23 +1,29 @@
 <app>
-  <h1>Mini projet Parcoursup</h1>
-  <p>Recherche de formations Parcoursup avec Riot</p>
+  <div class="page">
+    <h1>Mini projet Parcoursup</h1>
+    <p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
 
-  <div if={ !state.selected }>
-    <search-bar onsearch={ launchSearch }></search-bar>
+    <div if={ !state.selected }>
+      <search-bar onsearch={ launchSearch }></search-bar>
 
-    <result-list
-      results={ state.results }
-      hasSearched={ state.hasSearched }
-      loading={ state.loading }
-      ondetail={ showDetail }>
-    </result-list>
-  </div>
+      <div class="layout">
+        <result-list
+          results={ state.results }
+          hasSearched={ state.hasSearched }
+          loading={ state.loading }
+          ondetail={ showDetail }>
+        </result-list>
 
-  <div if={ state.selected }>
-    <detail-view
-      formation={ state.selected }
-      onback={ backToList }>
-    </detail-view>
+        <map-view results={ state.results }></map-view>
+      </div>
+    </div>
+
+    <div if={ state.selected }>
+      <detail-view
+        formation={ state.selected }
+        onback={ backToList }>
+      </detail-view>
+    </div>
   </div>
 
   <script>
diff --git a/parcoursup/components/detail-view.riot b/parcoursup/components/detail-view.riot
index 5dee019..47ae643 100644
--- a/parcoursup/components/detail-view.riot
+++ b/parcoursup/components/detail-view.riot
@@ -1,6 +1,5 @@
 <detail-view>
-  <div if={ props.formation }
-       style="border:1px solid #ccc; padding:10px; margin:10px;">
+  <div if={ props.formation } class="detail-card">
     <h2>{ props.formation.nom }</h2>
     <p><b>Établissement :</b> { props.formation.etablissement }</p>
     <p><b>Ville :</b> { props.formation.ville }</p>
@@ -11,7 +10,6 @@
     <p><b>Candidats :</b> { props.formation.candidats }</p>
     <p><b>Admis :</b> { props.formation.admis }</p>
     <p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>
-
     <button onclick={ () => props.onback() }>Retour</button>
   </div>
 </detail-view>
\ No newline at end of file
diff --git a/parcoursup/components/map-view.riot b/parcoursup/components/map-view.riot
index d719bba..3bfd26d 100644
--- a/parcoursup/components/map-view.riot
+++ b/parcoursup/components/map-view.riot
@@ -1,120 +1,53 @@
 <map-view>
   <div class="map-box">
     <h3>Carte des formations</h3>
-    <div class="map" ref="carte"></div>
+    <div id="map"></div>
   </div>
 
   <script>
     export default {
-
       onMounted() {
-        var divCarte = this.$('div[ref="carte"]');
-
-        this.carte           = L.map(divCarte).setView([46.8, 2.5], 6);
-        this.groupeMarqueurs = L.layerGroup().addTo(this.carte);
-        this.marqueursIndex  = {};
+        this.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
           attribution: '&copy; OpenStreetMap contributors'
-        }).addTo(this.carte);
+        }).addTo(this.map)
 
-        this.afficherMarqueurs();
-
-        var composant = this;
-
-        setTimeout(function() {
-          if (composant.carte) {
-            composant.carte.invalidateSize();
-          }
-        }, 200);
-
-        setTimeout(function() {
-          if (composant.carte) {
-            composant.carte.invalidateSize();
-          }
-        }, 500);
-
-        window.mapFocus = function(id) {
-          composant.centrerSurFormation(id);
-        };
+        this.markersLayer = L.layerGroup().addTo(this.map)
+        this.refreshMarkers()
       },
 
       onUpdated() {
-        this.afficherMarqueurs();
-
-        var composant = this;
-
-        if (this.carte) {
-          setTimeout(function() {
-            composant.carte.invalidateSize();
-          }, 100);
-
-          setTimeout(function() {
-            composant.carte.invalidateSize();
-          }, 300);
-        }
+        this.refreshMarkers()
       },
 
-      onBeforeUnmount() {
-        if (this.carte) {
-          this.carte.remove();
-          this.carte = null;
-        }
-        window.mapFocus = null;
-      },
-
-      afficherMarqueurs() {
-        if (!this.carte || !this.groupeMarqueurs) {
-          return;
+      refreshMarkers() {
+        if (!this.map || !this.markersLayer) {
+          return
         }
 
-        this.groupeMarqueurs.clearLayers();
-        this.marqueursIndex = {};
+        this.markersLayer.clearLayers()
 
-        var coordonnees = [];
-        var formations  = this.props.results || [];
+        const points = []
 
-        for (var i = 0; i < formations.length; i++) {
-          var f = formations[i];
+        for (let i = 0; i < this.props.results.length; i++) {
+          const f = this.props.results[i]
 
-          if (f.latitude != null && f.longitude != null) {
-            var marqueur = L.marker([f.latitude, f.longitude]);
-            marqueur.bindPopup('<b>' + f.nom + '</b><br>' + f.ville);
-            marqueur.addTo(this.groupeMarqueurs);
+          if (f.latitude && f.longitude) {
+            const marker = L.marker([f.latitude, f.longitude])
+            marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
+            marker.addTo(this.markersLayer)
 
-            this.marqueursIndex[f.id] = marqueur;
-            coordonnees.push([f.latitude, f.longitude]);
+            points.push([f.latitude, f.longitude])
           }
         }
 
-        if (coordonnees.length > 0) {
-          this.carte.fitBounds(coordonnees, { padding: [20, 20] });
+        if (points.length > 0) {
+          this.map.fitBounds(points, { padding: [20, 20] })
         } else {
-          this.carte.setView([46.8, 2.5], 6);
-        }
-      },
-
-      centrerSurFormation(id) {
-        var marqueur = this.marqueursIndex[id];
-
-        if (marqueur && this.carte) {
-          var divCarte = this.$('div[ref="carte"]');
-
-          if (divCarte) {
-            divCarte.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          }
-
-          var composant = this;
-
-          setTimeout(function() {
-            composant.carte.invalidateSize();
-            composant.carte.setView(marqueur.getLatLng(), 13, { animate: true });
-            marqueur.openPopup();
-          }, 400);
+          this.map.setView([46.8, 2.5], 6)
         }
       }
-
-    };
+    }
   </script>
-
-</map-view>
+</map-view>
\ No newline at end of file
diff --git a/parcoursup/components/result-list.riot b/parcoursup/components/result-list.riot
index dee485e..9d12a38 100644
--- a/parcoursup/components/result-list.riot
+++ b/parcoursup/components/result-list.riot
@@ -1,14 +1,14 @@
 <result-list>
-  <div>
-    <div if={ props.results.length === 0 && props.hasSearched && !props.loading }>
+  <div class="results">
+    <div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
       Aucun résultat trouvé
     </div>
 
-    <div if={ props.loading }>
+    <div class="message" if={ props.loading }>
       Chargement...
     </div>
 
-    <div each={ (f, i) in props.results } key={ f.id } style="border:1px solid #ccc; padding:10px; margin:10px;">
+    <div each={ (f, i) in props.results } key={ f.id } class="card">
       <h3>{ f.nom }</h3>
       <p><b>Établissement :</b> { f.etablissement }</p>
       <p><b>Ville :</b> { f.ville } ({ f.departement })</p>
diff --git a/parcoursup/components/search-bar.riot b/parcoursup/components/search-bar.riot
index 1a625e7..01861a4 100644
--- a/parcoursup/components/search-bar.riot
+++ b/parcoursup/components/search-bar.riot
@@ -1,5 +1,5 @@
 <search-bar>
-  <div>
+  <div class="search-bar">
     <input
       type="text"
       placeholder="Ex : BUT informatique"
diff --git a/parcoursup/index.html b/parcoursup/index.html
index db8dc62..349c182 100644
--- a/parcoursup/index.html
+++ b/parcoursup/index.html
@@ -1,19 +1,27 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Parcoursup Riot</title>
-
-  <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parcoursup Riot</title>
+  
+    <link rel="stylesheet" href="./style.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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="./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 9f4e3b6..da935e5 100644
--- a/parcoursup/style.css
+++ b/parcoursup/style.css
@@ -1,901 +1,97 @@
-/* ============================================================
-   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;
-  }
-  
-  *, *::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
-     =========================================================== */
-  
-  .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;
-    text-decoration: none;
-    color: inherit;
-  }
-  
-  .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;
-    text-decoration: none;
-  }
-  
-  /* ===========================================================
-     PAGE
-     =========================================================== */
-  
-  .page {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 24px 20px 40px;
-  }
-  
-  /* ===========================================================
-     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;
-  }
-  
-  .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: 0 0 20px;
-  }
-  
-  .search-bar input {
-    flex: 1;
-    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 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 {
-    font-size: 14px;
-    color: var(--gris-500);
-    margin: 0 0 14px;
-  }
-  
-  /* ===========================================================
-     CARDS
-     =========================================================== */
-  
-  .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; }
-  
-  /* --- Cards colorées du comparateur --- */
-  .card-tres-favorable {
-    background: #e8f5ef;
-    border-color: #6ec89b;
-    border-left: 4px solid #147a5c;
-  }
-  
-  .card-favorable {
-    background: #eaf7ed;
-    border-color: #a3d9b8;
-    border-left: 4px solid #1a936f;
-  }
-  
-  .card-possible {
-    background: #fef9e7;
-    border-color: #f6e05e;
-    border-left: 4px solid #d69e2e;
-  }
-  
-  .card-difficile {
-    background: #fef2f2;
-    border-color: #f5c6cb;
-    border-left: 4px solid #e67e22;
-  }
-  
-  .card-tres-difficile {
-    background: #fde8e8;
-    border-color: #f5a3a3;
-    border-left: 4px solid #c0392b;
-  }
-  
-  /* ===========================================================
-     BADGES ESTIMATION — 5 niveaux
-     =========================================================== */
-  
-  .estimate {
-    display: inline-block;
-    padding: 4px 14px;
-    border-radius: 4px;
-    font-size: 13px;
-    font-weight: 700;
-  }
-  
-  .tres-favorable {
-    background: #147a5c;
-    color: white;
-  }
-  
-  .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: #c05621;
-    border: 1px solid #f5c6cb;
-  }
-  
-  .tres-difficile {
-    background: var(--rouge);
-    color: white;
-  }
-  
-  .estimation-result {
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
-  
-  .estimation-detail {
-    font-size: 12px;
-    color: var(--gris-500);
-  }
-  
-  /* ===========================================================
-     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);
-  }
-  
-  /* ===========================================================
-     LAYOUT
-     =========================================================== */
-  
-  .layout {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-  
-  .results {
-    display: grid;
-    gap: 12px;
-  }
-  
-  .message {
-    padding: 16px;
-    background: white;
-    border: 1px solid var(--gris-200);
-    border-radius: var(--rayon);
-    text-align: center;
-    color: var(--gris-500);
-  }
-  
-  /* ===========================================================
-     MAP
-     =========================================================== */
-  
-  .map-box {
-    overflow: hidden;
-    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
-     =========================================================== */
-  
-  .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: 5px 0;
-    font-size: 14px;
-    color: var(--gris-700);
-  }
-  
-  .detail-grid {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 24px;
-    align-items: start;
-    margin-top: 8px;
-    margin-bottom: 28px;
-  }
-  
-  .detail-table {
-    width: 100%;
-    border-collapse: collapse;
-    background: white;
-    border-radius: var(--rayon);
-    overflow: hidden;
-  }
-  
-  .detail-table th,
-  .detail-table td {
-    border: 1px solid var(--gris-200);
-    padding: 10px 12px;
-    text-align: left;
-    font-size: 14px;
-  }
-  
-  .detail-table thead th {
-    background: var(--gris-100);
-    font-weight: 700;
-    color: var(--gris-700);
-    font-size: 13px;
-  }
-  
-  .total-row td {
-    font-weight: 700;
-    background: var(--gris-100);
-  }
-  
-  .timeline-box {
-    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: 20px;
-    padding-left: 26px;
-    border-left: 3px solid #b8e0cd;
-  }
-  
-  .timeline-item { position: relative; margin-bottom: 32px; }
-  
-  .timeline-dot {
-    position: absolute;
-    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-evolution-taux .column {
-    height: 220px;
-    max-width: 100%;
-    margin: 0 auto;
-  }
-  
-  #chart-evolution-candidats .column {
-    height: 220px;
-    max-width: 100%;
-    margin: 0 auto;
-  }
-  
-  .chart-wrapper .data {
-    font-size: 11px;
-    font-weight: 700;
-    color: #fff;
-    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
-  }
-  
-  .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
-     =========================================================== */
-  
-  /* --- Badge cliquable --- */
-  .badge-clickable {
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-  
-  .badge-clickable:hover {
-    background: #c6f0dc;
-    border-color: #6ec89b;
-  }
-  
-  /* --- Filtres avancés --- */
-  .filters-toggle {
-    margin: -10px 0 16px;
-  }
-  
-  .filters-panel {
-    background: white;
-    border: 1px solid var(--gris-200);
-    border-radius: var(--rayon);
-    padding: 16px 20px;
-    margin-bottom: 20px;
-  }
-  
-  .filter-row {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-    margin-bottom: 12px;
-  }
-  
-  .filter-row:last-child {
-    margin-bottom: 0;
-  }
-  
-  .filter-item {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 160px;
-    flex: 1;
-  }
-  
-  .filter-item label {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--gris-500);
-  }
-  
-  .filter-item select,
-  .filter-item input {
-    padding: 8px 10px;
-    font-size: 14px;
-    border: 1.5px solid var(--gris-300);
-    border-radius: var(--rayon);
-    background: white;
-    outline: none;
-  }
-  
-  .filter-item select:focus,
-  .filter-item input:focus {
-    border-color: var(--vert);
-  }
-  
-  @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%; }
-  }
-
-  /* ===========================================================
-     HEADER RIGHT (badge + auth)
-     =========================================================== */
-
-  .header-right {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  /* ===========================================================
-     AUTH PANEL
-     =========================================================== */
-
-  .btn-auth {
-    background: var(--vert);
-    color: white;
-    padding: 6px 14px;
-    font-size: 13px;
-    font-weight: 600;
-    border: none;
-    border-radius: var(--rayon);
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    transition: background 0.15s;
-  }
-
-  .btn-auth:hover { background: var(--vert-fonce); }
-
-  .auth-icon { font-size: 15px; }
-
-  .auth-user-info {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .auth-email {
-    font-size: 13px;
-    color: var(--gris-700);
-    font-weight: 500;
-    max-width: 160px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .btn-auth-logout {
-    background: white;
-    color: var(--rouge);
-    border: 1.5px solid #f5c6cb;
-    padding: 5px 12px;
-    font-size: 13px;
-    font-weight: 600;
-    border-radius: var(--rayon);
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-
-  .btn-auth-logout:hover {
-    background: #fef2f2;
-  }
-
-  /* --- Modale --- */
-  .auth-modal-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(17, 24, 39, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-    backdrop-filter: blur(2px);
-    animation: fadeIn 0.15s ease;
-  }
-
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-  }
-
-  .auth-modal {
-    background: white;
-    border-radius: 10px;
-    padding: 32px 36px;
-    width: 100%;
-    max-width: 400px;
-    position: relative;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
-    animation: slideUp 0.2s ease;
-  }
-
-  @keyframes slideUp {
-    from { transform: translateY(16px); opacity: 0; }
-    to   { transform: translateY(0);    opacity: 1; }
-  }
-
-  .auth-modal-close {
-    position: absolute;
-    top: 14px;
-    right: 16px;
-    background: none;
-    border: none;
-    font-size: 18px;
-    cursor: pointer;
-    color: var(--gris-500);
-    line-height: 1;
-    padding: 4px 6px;
-    border-radius: 4px;
-    transition: background 0.15s;
-  }
-
-  .auth-modal-close:hover { background: var(--gris-100); }
-
-  .auth-modal-title {
-    margin: 0 0 20px;
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--gris-900);
-  }
-
-  /* --- Onglets --- */
-  .auth-tabs {
-    display: flex;
-    margin-bottom: 24px;
-    border-bottom: 2px solid var(--gris-200);
-  }
-
-  .auth-tab {
-    flex: 1;
-    background: none;
-    border: none;
-    padding: 8px 0;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    color: var(--gris-500);
-    border-bottom: 2px solid transparent;
-    margin-bottom: -2px;
-    transition: all 0.15s;
-  }
-
-  .auth-tab.active {
-    color: var(--vert);
-    border-bottom-color: var(--vert);
-  }
-
-  .auth-tab:hover:not(.active) { color: var(--gris-700); }
-
-  /* --- Formulaire --- */
-  .auth-form {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-
-  .auth-field {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .auth-field label {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--gris-700);
-  }
-
-  .auth-field input {
-    padding: 10px 12px;
-    font-size: 14px;
-    border: 1.5px solid var(--gris-300);
-    border-radius: var(--rayon);
-    outline: none;
-    transition: border-color 0.2s;
-    background: white;
-  }
-
-  .auth-field input:focus {
-    border-color: var(--vert);
-    box-shadow: 0 0 0 3px rgba(26, 147, 111, 0.12);
-  }
-
-  .auth-error {
-    background: #fef2f2;
-    border: 1px solid #f5c6cb;
-    color: var(--rouge);
-    padding: 10px 14px;
-    border-radius: var(--rayon);
-    font-size: 13px;
-  }
-
-  .auth-submit {
-    width: 100%;
-    justify-content: center;
-    padding: 11px;
-    font-size: 15px;
-  }
\ No newline at end of file
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    background: #f5f5f5;
+    color: #222;
+  }
+  
+  .page {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  
+  h1 {
+    margin-bottom: 8px;
+  }
+  
+  .subtitle {
+    margin-top: 0;
+    color: #555;
+  }
+  
+  .search-bar {
+    display: flex;
+    gap: 10px;
+    margin: 20px 0;
+  }
+  
+  .search-bar input {
+    flex: 1;
+    padding: 10px;
+    font-size: 16px;
+  }
+  
+  .search-bar button,
+  .card button,
+  .detail-card button {
+    padding: 10px 14px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  
+  .layout {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  .results {
+    display: grid;
+    gap: 16px;
+  }
+  
+  .card {
+    border: 1px solid #d8d8d8;
+    background: white;
+    padding: 16px;
+    border-radius: 8px;
+  }
+  
+  .card h3 {
+    margin-top: 0;
+  }
+  
+  .detail-card {
+    border: 1px solid #d8d8d8;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+  }
+  
+  .map-box {
+    border: 1px solid #d8d8d8;
+    background: white;
+    border-radius: 8px;
+    padding: 12px;
+  }
+  
+  #map {
+    height: 420px;
+    width: 100%;
+    border-radius: 6px;
+  }
+  
+  .message {
+    padding: 12px;
+    background: white;
+    border: 1px solid #d8d8d8;
+    border-radius: 8px;
+  }
+  
+  @media (min-width: 900px) {
+    .layout {
+      grid-template-columns: 1.2fr 1fr;
+      align-items: start;
+    }
+  }
\ No newline at end of file