diff --git a/articles/frelon_asiatique_evolution.html b/articles/articles/frelon_asiatique_evolution.html similarity index 100% rename from articles/frelon_asiatique_evolution.html rename to articles/articles/frelon_asiatique_evolution.html diff --git a/exercices/TP_Nuisibles.html b/exercices/TP_Nuisibles.html index acc7667..c9a9eb2 100644 --- a/exercices/TP_Nuisibles.html +++ b/exercices/TP_Nuisibles.html @@ -17,6 +17,7 @@ justify-content: center; padding: 2rem; padding-top: calc(70px + 2rem); + padding-bottom: calc(52px + 2rem); opacity: 0; transition: opacity 0.4s ease; overflow-y: auto; @@ -51,31 +52,59 @@ z-index: 100; } +/* BOTTOM BAR */ +.bottom-bar { + position: fixed; + bottom: 0; left: 0; right: 0; + height: 52px; + background: rgba(250, 238, 218, 0.98); + border-top: 2px solid var(--amber); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + z-index: 100; + backdrop-filter: blur(10px); +} + /* SLIDE NAV */ .slide-counter { - position: fixed; - bottom: 20px; right: 20px; font-size: 12px; - color: var(--text-muted); - z-index: 100; + font-family: 'Syne', sans-serif; + font-weight: 600; + color: var(--amber-dark); } /* BACK BUTTON */ .back-btn { - position: fixed; - bottom: 20px; left: 20px; background: none; - border: 0.5px solid var(--border); + border: 0.5px solid var(--amber); border-radius: 20px; padding: 6px 16px; font-size: 12px; - color: var(--text-muted); + color: var(--amber-dark); cursor: pointer; - z-index: 100; transition: all 0.2s; font-family: 'DM Sans', sans-serif; } -.back-btn:hover { background: rgba(0,0,0,0.05); } +.back-btn:hover { background: rgba(186,117,23,0.08); } + +/* FORMATEUR SELECTOR */ +.formateur-btn { + font-family: 'Syne', sans-serif; + font-size: 14px; + font-weight: 600; + padding: 10px 24px; + border-radius: 30px; + border: 1.5px solid var(--border); + background: white; + color: var(--text-muted); + cursor: pointer; + transition: all 0.2s; + flex: 1; +} +.formateur-btn:hover { border-color: var(--amber); color: var(--amber); } +.formateur-btn.selected { background: var(--amber-light); border-color: var(--amber); color: var(--amber-dark); font-weight: 700; } /* CARDS & BUTTONS */ .btn { @@ -577,7 +606,7 @@ /* SCROLLABLE AREA */ .scroll-area { overflow-y: auto; - max-height: calc(100vh - 180px); + max-height: calc(100vh - 232px); width: 100%; display: flex; flex-direction: column; @@ -618,11 +647,11 @@
- - - - - + + +