David Blanc Brioir
d2f7165120
- Add complete Library RAG application (Flask + MCP server) - PDF processing pipeline with OCR and LLM extraction - Weaviate vector database integration (BGE-M3 embeddings) - Flask web interface with search and document management - MCP server for Claude Desktop integration - Comprehensive test suite (134 tests) - Clean up root directory - Remove obsolete documentation files - Remove backup and temporary files - Update autonomous agent configuration - Update prompts - Enhance initializer bis prompt with better instructions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
404 lines
8.0 KiB
CSS
404 lines
8.0 KiB
CSS
|
||
/* =========================================================
|
||
Charte graphique – Site RAG Philosophie
|
||
Fichier CSS prêt à l'emploi
|
||
Palette beige + contrastes doux
|
||
Typo : DM Sans (titres) + Lato (texte)
|
||
========================================================= */
|
||
|
||
/* -------------------------
|
||
1. Reset basique
|
||
------------------------- */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
font-size: 16px;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
background-color: #F8F4EE; /* beige clair */
|
||
color: #2B2B2B; /* gris anthracite */
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* -------------------------
|
||
2. Variables CSS
|
||
------------------------- */
|
||
|
||
:root {
|
||
--color-bg-main: #F8F4EE;
|
||
--color-bg-secondary: #EAE5E0;
|
||
--color-text-main: #2B2B2B;
|
||
--color-text-strong: #1F1F1F;
|
||
--color-accent: #7D6E58;
|
||
--color-accent-alt: #556B63;
|
||
|
||
--max-content-width: 1100px;
|
||
|
||
--font-title: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--font-body: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
/* -------------------------
|
||
3. Conteneur principal
|
||
------------------------- */
|
||
|
||
.wrapper {
|
||
max-width: var(--max-content-width);
|
||
margin: 0 auto;
|
||
padding: 1.5rem 1.5rem;
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
.wrapper {
|
||
padding: 2.5rem 3rem;
|
||
}
|
||
}
|
||
|
||
/* -------------------------
|
||
4. Titres & textes
|
||
------------------------- */
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: var(--font-title);
|
||
color: var(--color-text-strong);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.5rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 1.5rem;
|
||
font-family: var(--font-body);
|
||
font-size: 1rem;
|
||
color: var(--color-text-main);
|
||
}
|
||
|
||
strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Texte long (ex : article) */
|
||
|
||
.article-body {
|
||
line-height: 1.65;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* Intro / chapeau */
|
||
|
||
.lead {
|
||
font-size: 1.1rem;
|
||
font-style: italic;
|
||
color: var(--color-accent-alt);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
/* Légendes / annotations */
|
||
|
||
.caption {
|
||
font-size: 0.9rem;
|
||
font-weight: 300;
|
||
color: var(--color-accent);
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
/* -------------------------
|
||
5. Liens
|
||
------------------------- */
|
||
|
||
a {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
transition: color 0.2s ease, text-decoration-color 0.2s ease;
|
||
}
|
||
|
||
a:hover,
|
||
a:focus {
|
||
text-decoration: underline;
|
||
text-decoration-thickness: 1px;
|
||
}
|
||
|
||
/* -------------------------
|
||
6. Boutons
|
||
------------------------- */
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.65rem 1.6rem;
|
||
border-radius: 8px;
|
||
border: 1.5px solid var(--color-accent);
|
||
background-color: transparent;
|
||
color: var(--color-accent);
|
||
font-family: var(--font-body);
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
.btn:hover,
|
||
.btn:focus {
|
||
background-color: var(--color-accent);
|
||
color: var(--color-bg-main);
|
||
}
|
||
|
||
/* Variante pleine */
|
||
|
||
.btn-primary {
|
||
background-color: var(--color-accent);
|
||
color: var(--color-bg-main);
|
||
}
|
||
|
||
.btn-primary:hover,
|
||
.btn-primary:focus {
|
||
background-color: var(--color-accent-alt);
|
||
border-color: var(--color-accent-alt);
|
||
}
|
||
|
||
/* -------------------------
|
||
7. Blocs & sections
|
||
------------------------- */
|
||
|
||
.section {
|
||
padding: 3.5rem 0;
|
||
}
|
||
|
||
.section--alt {
|
||
background-color: var(--color-bg-secondary);
|
||
}
|
||
|
||
/* Cartes / encadrés génériques */
|
||
|
||
.card {
|
||
background-color: #FFFFFF0F;
|
||
border-radius: 12px;
|
||
padding: 1.75rem;
|
||
border: 1px solid rgba(125, 110, 88, 0.25);
|
||
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
/* -------------------------
|
||
8. Citations & encadrés
|
||
------------------------- */
|
||
|
||
blockquote {
|
||
margin: 2.5rem 0;
|
||
padding: 1.75rem 2rem;
|
||
background-color: var(--color-bg-secondary);
|
||
border-left: 3px solid var(--color-accent);
|
||
font-style: italic;
|
||
color: var(--color-accent-alt);
|
||
}
|
||
|
||
blockquote p {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.quote-box {
|
||
margin: 2.5rem 0;
|
||
padding: 1.75rem 2rem;
|
||
background-color: var(--color-bg-secondary);
|
||
border: 1px solid var(--color-accent);
|
||
border-radius: 10px;
|
||
font-style: italic;
|
||
color: var(--color-accent-alt);
|
||
}
|
||
|
||
/* Citation auteur */
|
||
|
||
.quote-author {
|
||
margin-top: 1rem;
|
||
font-style: normal;
|
||
font-size: 0.9rem;
|
||
color: var(--color-accent);
|
||
text-align: right;
|
||
}
|
||
|
||
/* -------------------------
|
||
9. Layout pour pages RAG
|
||
------------------------- */
|
||
|
||
/* Layout type pour page de recherche / résultats */
|
||
|
||
.rag-layout {
|
||
display: grid;
|
||
gap: 2rem;
|
||
}
|
||
|
||
@media (min-width: 992px) {
|
||
.rag-layout {
|
||
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
|
||
/* Colonne contenu principal */
|
||
|
||
.rag-main {
|
||
background-color: #FFFFFF0A;
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
border: 1px solid rgba(125, 110, 88, 0.2);
|
||
}
|
||
|
||
/* Colonne latérale : contexte, filtres, sources */
|
||
|
||
.rag-sidebar {
|
||
background-color: var(--color-bg-secondary);
|
||
border-radius: 12px;
|
||
padding: 1.75rem;
|
||
border: 1px solid rgba(125, 110, 88, 0.25);
|
||
}
|
||
|
||
/* -------------------------
|
||
10. Éléments spécifiques RAG
|
||
------------------------- */
|
||
|
||
/* Zone question utilisateur */
|
||
|
||
.rag-query {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.rag-query-label {
|
||
font-family: var(--font-title);
|
||
font-size: 0.9rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-accent-alt);
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
|
||
.rag-query-input {
|
||
width: 100%;
|
||
padding: 0.8rem 1rem;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
background-color: #fff;
|
||
font-family: var(--font-body);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* Résultats RAG */
|
||
|
||
.rag-result {
|
||
padding: 1.5rem 0;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.rag-result:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.rag-result-title {
|
||
font-family: var(--font-title);
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-strong);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.rag-result-meta {
|
||
font-size: 0.85rem;
|
||
color: var(--color-accent);
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
.rag-result-snippet {
|
||
font-size: 0.95rem;
|
||
color: var(--color-text-main);
|
||
}
|
||
|
||
/* Badges (tags, sources, type de document, etc.) */
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.25rem 0.6rem;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(85, 107, 99, 0.4);
|
||
font-size: 0.75rem;
|
||
color: var(--color-accent-alt);
|
||
margin-right: 0.4rem;
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
|
||
/* -------------------------
|
||
11. Header & footer
|
||
------------------------- */
|
||
|
||
.site-header {
|
||
padding: 1.5rem 0;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.site-title {
|
||
font-family: var(--font-title);
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-strong);
|
||
}
|
||
|
||
.site-subtitle {
|
||
font-family: var(--font-body);
|
||
font-size: 0.9rem;
|
||
color: var(--color-accent-alt);
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.site-footer {
|
||
margin-top: 4rem;
|
||
padding: 2rem 0 1.5rem;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.04);
|
||
font-size: 0.85rem;
|
||
color: rgba(43, 43, 43, 0.7);
|
||
}
|
||
|
||
/* -------------------------
|
||
12. Utilitaires
|
||
------------------------- */
|
||
|
||
.mt-1 { margin-top: 0.5rem; }
|
||
.mt-2 { margin-top: 1rem; }
|
||
.mt-3 { margin-top: 1.5rem; }
|
||
.mt-4 { margin-top: 2rem; }
|
||
|
||
.mb-1 { margin-bottom: 0.5rem; }
|
||
.mb-2 { margin-bottom: 1rem; }
|
||
.mb-3 { margin-bottom: 1.5rem; }
|
||
.mb-4 { margin-bottom: 2rem; }
|
||
|
||
.text-center { text-align: center; }
|
||
.text-right { text-align: right; }
|
||
.text-muted { color: rgba(43, 43, 43, 0.7); }
|