/* ============================================================================
app.css — composants des pages publiques Michel Vision
----------------------------------------------------------------------------
Chargé après base.css, qui fournit les tokens, le reset et les primitives.
Ce fichier ne définit AUCUN token : s'il te faut une valeur, elle est dans
base.css ou elle n'a pas lieu d'exister.
Le CSS des pages d'administration vit dans legacy.css, chargé uniquement par
celles-ci via le bloc {% block vendor_css %} de admin_base.html.
========================================================================== */
/* ── Socle applicatif ─────────────────────────────────────────────────────────
Polices chargées via + dans layout.html
(évite la chaîne render-blocking sérialisée CSS → @import → woff2).
Tokens, reset, body et typographie de base vivent dans base.css : ce fichier
ne contient plus que ce qui leur est spécifique — aucune redéfinition de
token ici. */
main { flex: 1; }
/* Nuance de survol des liens : l'ambre s'éclaircit, elle ne change pas de teinte. */
@media (hover: hover) and (pointer: fine) {
a:hover { color: #FFB224; }
}
/* Bootstrap applique `color: …!important` sur .text-muted : il faut le même
poids pour reprendre la main sur les pages qui chargent encore bootstrap. */
.text-muted { color: var(--mv-text-muted) !important; }
.mono { font-family: var(--mv-font-mono); }
/* ── En-tête de page ──────────────────────────────────────────────────────── */
.page-header { margin-bottom: var(--s5); }
.page-subtitle {
max-width: 62ch;
margin-bottom: 0;
color: var(--mv-text-muted);
font-size: var(--t-sm);
}
/* Coque de contenu : fond relevé + filet 1 px. Ni ombre, ni flou. */
.content-shell {
background: var(--mv-bg-raised);
border: 1px solid var(--mv-border);
border-radius: var(--r2);
padding: clamp(var(--s4), 3vw, var(--s6));
}
/* ── Navbar ───────────────────────────────────────────────────────────────────
Opaque, en flux normal, une seule apparence : plus de flou, plus d'ombre,
plus de variante « scrolled ». */
.navbar {
background: var(--mv-bg-raised) !important;
border-bottom: 1px solid var(--mv-line);
padding: var(--s3) 0;
}
.navbar-brand {
font-family: var(--mv-font-body);
font-weight: 800;
font-size: var(--t-body);
color: var(--mv-text) !important;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: var(--s2);
}
/* Pastille d'état — reste ronde (exception assumée aux deux rayons). */
.brand-dot {
width: 10px;
height: 10px;
background: var(--mv-accent);
border-radius: 50%;
flex-shrink: 0;
}
.navbar-nav .nav-link {
color: var(--mv-text-muted) !important;
font-size: var(--t-sm);
font-weight: 600;
padding: var(--s2) var(--s3) !important;
border-radius: var(--r1);
transition: background-color var(--dur-1) var(--ease-out),
color var(--dur-1) var(--ease-out);
}
/* !important conservé : Bootstrap cible .navbar-nav .nav-link.active (0,3,0)
et gagnerait sur ce sélecteur par spécificité, quel que soit l'ordre. */
.nav-link.active {
color: var(--mv-text) !important;
background: var(--mv-accent-wash);
}
.nav-avatar {
width: 30px;
height: 30px;
background: var(--mv-accent);
color: var(--mv-accent-ink);
border-radius: 50%;
font-size: var(--t-meta);
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-email { color: var(--mv-text-muted) !important; font-size: var(--t-meta); }
.navbar-toggler {
border: 1px solid var(--mv-border);
border-radius: var(--r2);
padding: var(--s1) var(--s2);
color: var(--mv-text-muted);
background: transparent;
}
/* Neutralise l'anneau de focus de Bootstrap : le :focus-visible de base.css
(outline ambre) est la seule indication de focus du site. */
.navbar-toggler:focus { box-shadow: none; }
/* Calque flottant réellement superposé : seul endroit du fichier où une ombre
est autorisée. */
.dropdown-menu {
background: var(--mv-bg-overlay);
border: 1px solid var(--mv-border);
border-radius: var(--r2);
box-shadow: var(--shadow-overlay);
padding: var(--s1);
min-width: 210px;
}
.dropdown-item {
color: var(--mv-text);
border-radius: var(--r1);
font-size: var(--t-sm);
padding: var(--s2) var(--s3);
display: flex;
align-items: center;
transition: background-color var(--dur-1) var(--ease-out),
color var(--dur-1) var(--ease-out);
}
.dropdown-item.text-danger { color: var(--mv-danger) !important; }
.dropdown-divider { border-color: var(--mv-line); margin: var(--s1) 0; }
.dropdown-item-text { padding: var(--s2) var(--s3); color: var(--mv-text-muted); font-size: var(--t-meta); }
@media (hover: hover) and (pointer: fine) {
.navbar-nav .nav-link:hover {
color: var(--mv-text) !important;
background: rgba(255, 255, 255, 0.06);
}
.dropdown-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--mv-text); }
/* Le rouge du libellé porte déjà l'information : le survol reste neutre. */
.dropdown-item.text-danger:hover { background: rgba(255, 255, 255, 0.06); }
}
/* ── Pastille de pouls ────────────────────────────────────────────────────────
Témoin « données vivantes » des en-têtes de section d'index.html.
Reste ronde ; l'amplitude est ramenée à l'opacité seule. */
.pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mv-accent);
animation: pulse-anim 1.6s var(--ease-in-out) infinite;
flex-shrink: 0;
}
.pulse-dot-sm {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mv-accent);
animation: pulse-anim 1.6s var(--ease-in-out) infinite;
flex-shrink: 0;
}
@keyframes pulse-anim {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* ── Grille de fonctionnalités ── */
.feature-grid { margin-bottom: var(--s5); }
.feature-card {
background: var(--mv-bg-raised);
border: 1px solid var(--mv-border);
border-radius: var(--r2);
height: 100%;
transition: border-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.feature-card:hover { border-color: var(--mv-accent-line); }
}
.feature-card .card-body { padding: var(--s5); }
.feature-icon {
width: 46px;
height: 46px;
border-radius: var(--r2);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--s3);
}
/* Une seule des trois cartes est accentuée : l'analyse est l'action principale.
Les deux autres sont neutres — la teinte ne distinguait rien, le libellé le fait. */
.feature-icon-accent { background: var(--mv-accent-wash); color: var(--mv-accent); }
.feature-icon-success { background: rgba(255, 255, 255, 0.04); color: var(--mv-text-muted); }
.feature-icon-muted { background: rgba(255, 255, 255, 0.04); color: var(--mv-text-muted); }
.feature-text { color: var(--mv-text-muted); font-size: var(--t-sm); margin-bottom: var(--s4); }
/* ── Panneau de chiffres ── */
.stats-panel {
background: var(--mv-bg-raised);
border: 1px solid var(--mv-border);
border-radius: var(--r2);
padding: var(--s5);
}
.stat-card { text-align: center; padding: var(--s3); }
.stat-value {
font-family: var(--mv-font-body);
font-size: var(--t-h1);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--mv-accent);
line-height: 1.15;
font-variant-numeric: tabular-nums;
margin-bottom: var(--s1);
}
/* ── Cartes ── */
.card {
background: var(--mv-bg-raised);
border: 1px solid var(--mv-border);
border-radius: var(--r2);
}
/* Le relief de l'en-tête vient d'un fond enfoncé + un filet, pas d'une ombre. */
.card-header {
background: var(--mv-bg-sunken) !important;
border-bottom: 1px solid var(--mv-line) !important;
color: var(--mv-text) !important;
font-weight: 700;
border-radius: var(--r2) var(--r2) 0 0 !important;
padding: var(--s3) var(--s4);
}
/* ── Boutons (compléments à base.css) ── */
.btn-light {
background: var(--mv-text);
border-color: var(--mv-text);
color: var(--mv-accent-ink);
}
.btn-outline-light {
color: var(--mv-text);
border-color: var(--mv-border);
background: transparent;
}
@media (hover: hover) and (pointer: fine) {
.btn-light:hover {
background: var(--mv-text-muted);
border-color: var(--mv-text-muted);
color: var(--mv-accent-ink);
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--mv-text);
border-color: var(--mv-line-field);
}
}
/* ── Champs ── */
/* Le menu natif d'un