921 lines
26 KiB
HTML
921 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Expria — Tableau de bord · Direction H : Juste milieu</title>
|
|
<style>
|
|
/* =========================================================
|
|
DIRECTION H — "JUSTE MILIEU"
|
|
Entre Boréal (A) trop blanc et Cadence (B) trop sombre.
|
|
Inspirations : Revolut (mode clair), Notion, Linear,
|
|
N26, Anthropic Console.
|
|
Parti pris : fond gris-bleuté calme, cards blanches qui
|
|
ressortent avec profondeur, bleu Expria pivot, accents
|
|
bleu-nuit pour les éléments premium/structurants.
|
|
========================================================= */
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
/* Fonds — gris bleutés, jamais pur blanc pour éviter l'effet clinique */
|
|
--canvas: #EEF2F8; /* fond global, bleuté très léger */
|
|
--canvas-2: #E6EBF4; /* fond plus marqué, séparations */
|
|
--surface: #FFFFFF; /* cards — blanc franc qui ressort */
|
|
--surface-hover: #F8FAFD; /* cards au survol */
|
|
|
|
/* Hairlines — fines, bleutées */
|
|
--line: #DDE3ED;
|
|
--line-strong: #C7D0E0;
|
|
|
|
/* Encres — ardoise, jamais noir pur (plus doux, plus premium) */
|
|
--ink-1: #0F172A; /* titres forts */
|
|
--ink-2: #1E293B; /* corps principal */
|
|
--ink-3: #475569; /* secondaire */
|
|
--ink-4: #64748B; /* tertiaire, labels */
|
|
--ink-5: #94A3B8; /* désactivé, hints */
|
|
|
|
/* Brand Expria */
|
|
--expria: #1B4FD8;
|
|
--expria-hover: #1741B8;
|
|
--expria-50: #EEF3FF;
|
|
--expria-100: #DCE6FF;
|
|
--expria-200: #B8CDFF;
|
|
|
|
/* Bleu nuit — accent secondaire pour éléments structurants/premium */
|
|
--deep: #0B1F5C;
|
|
--deep-2: #142B6E;
|
|
|
|
/* Sémantiques — pastel sur blanc */
|
|
--success: #0E9F6E;
|
|
--success-bg: #E6F6F0;
|
|
--warning: #C77A00;
|
|
--warning-bg: #FEF3E2;
|
|
--danger: #C53030;
|
|
--danger-bg: #FDECEC;
|
|
|
|
/* Élévations — subtiles, crée la profondeur sans alourdir */
|
|
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
|
|
--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
|
|
|
|
/* Rayons */
|
|
--r-sm: 6px;
|
|
--r-md: 10px;
|
|
--r-lg: 14px;
|
|
--r-xl: 18px;
|
|
--r-full: 999px;
|
|
}
|
|
|
|
html, body {
|
|
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
background: var(--canvas);
|
|
color: var(--ink-2);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* =========================================================
|
|
HEADER (bandeau de présentation de la direction)
|
|
========================================================= */
|
|
.da-header {
|
|
background: var(--surface);
|
|
border-bottom: 0.5px solid var(--line);
|
|
padding: 20px 28px;
|
|
}
|
|
.da-header-inner {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
.da-header-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--ink-1);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.da-header-subtitle {
|
|
font-size: 12px;
|
|
color: var(--ink-4);
|
|
margin-top: 2px;
|
|
}
|
|
.da-header-tag {
|
|
font-size: 11px;
|
|
color: var(--expria);
|
|
background: var(--expria-50);
|
|
padding: 5px 12px;
|
|
border-radius: var(--r-full);
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* =========================================================
|
|
LAYOUT APP
|
|
========================================================= */
|
|
.app {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 240px 1fr;
|
|
gap: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* =========================================================
|
|
SIDEBAR
|
|
========================================================= */
|
|
.sidebar {
|
|
background: transparent;
|
|
border-right: 0.5px solid var(--line);
|
|
padding: 24px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--ink-1);
|
|
letter-spacing: -0.02em;
|
|
padding: 0 8px;
|
|
}
|
|
.logo-mark {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--expria);
|
|
border-radius: var(--r-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.nav-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.nav-group-label {
|
|
font-size: 10px;
|
|
color: var(--ink-5);
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
padding: 0 10px 6px;
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 12px;
|
|
border-radius: var(--r-md);
|
|
font-size: 13.5px;
|
|
color: var(--ink-3);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
text-decoration: none;
|
|
}
|
|
.nav-item:hover {
|
|
background: var(--canvas-2);
|
|
color: var(--ink-1);
|
|
}
|
|
.nav-item.active {
|
|
background: var(--surface);
|
|
color: var(--ink-1);
|
|
font-weight: 600;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 0.5px solid var(--line);
|
|
}
|
|
.nav-item svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 1.75;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.user-card {
|
|
margin-top: auto;
|
|
padding: 12px;
|
|
background: var(--surface);
|
|
border: 0.5px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--r-full);
|
|
background: var(--deep);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.user-meta { flex: 1; min-width: 0; }
|
|
.user-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--ink-1);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.user-plan {
|
|
font-size: 11px;
|
|
color: var(--ink-4);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* =========================================================
|
|
MAIN
|
|
========================================================= */
|
|
.main {
|
|
padding: 32px 36px 56px;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.page-title-block { flex: 1; }
|
|
.page-eyebrow {
|
|
font-size: 11px;
|
|
color: var(--ink-4);
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 6px;
|
|
}
|
|
.page-title {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: var(--ink-1);
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
}
|
|
.page-sub {
|
|
font-size: 14px;
|
|
color: var(--ink-3);
|
|
margin-top: 6px;
|
|
line-height: 1.6;
|
|
max-width: 640px;
|
|
}
|
|
|
|
/* =========================================================
|
|
BOUTONS
|
|
========================================================= */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 16px;
|
|
border: none;
|
|
border-radius: var(--r-md);
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
font-family: inherit;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: var(--expria);
|
|
color: white;
|
|
box-shadow: 0 1px 2px rgba(27, 79, 216, 0.24);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--expria-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(27, 79, 216, 0.2);
|
|
}
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--ink-2);
|
|
border: 0.5px solid var(--line-strong);
|
|
}
|
|
.btn-ghost:hover {
|
|
background: var(--surface);
|
|
border-color: var(--ink-5);
|
|
}
|
|
.btn-arrow {
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* =========================================================
|
|
GRID & CARDS
|
|
========================================================= */
|
|
.metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--surface);
|
|
border: 0.5px solid var(--line);
|
|
border-radius: var(--r-lg);
|
|
padding: 22px;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: box-shadow 0.2s, transform 0.2s;
|
|
}
|
|
.card-raised {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 11px;
|
|
color: var(--ink-4);
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Metric cards */
|
|
.metric-card .metric-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--ink-1);
|
|
letter-spacing: -0.03em;
|
|
line-height: 1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.metric-value-unit {
|
|
font-size: 14px;
|
|
color: var(--ink-4);
|
|
font-weight: 500;
|
|
}
|
|
.metric-sub {
|
|
font-size: 12px;
|
|
color: var(--ink-4);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.progress {
|
|
height: 5px;
|
|
background: var(--canvas-2);
|
|
border-radius: var(--r-full);
|
|
margin-top: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: var(--expria);
|
|
border-radius: var(--r-full);
|
|
transition: width 0.4s;
|
|
}
|
|
.progress-fill.success { background: var(--success); }
|
|
|
|
/* Metric card highlight — plan */
|
|
.metric-card-plan {
|
|
background: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%);
|
|
color: white;
|
|
border-color: transparent;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.metric-card-plan::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -30%;
|
|
width: 180px;
|
|
height: 180px;
|
|
background: radial-gradient(circle, rgba(27, 79, 216, 0.4), transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
.metric-card-plan .card-label { color: rgba(255, 255, 255, 0.6); }
|
|
.metric-card-plan .plan-name {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 4px;
|
|
}
|
|
.metric-card-plan .plan-desc {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
line-height: 1.5;
|
|
margin-bottom: 16px;
|
|
}
|
|
.metric-card-plan .btn-upgrade {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
background: var(--expria);
|
|
color: white;
|
|
border-radius: var(--r-md);
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: background 0.15s;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.metric-card-plan .btn-upgrade:hover {
|
|
background: #2A60E8;
|
|
}
|
|
|
|
/* =========================================================
|
|
ROW — 2 colonnes pour historique + prochaine étape
|
|
========================================================= */
|
|
.row-2 {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* =========================================================
|
|
HISTORIQUE
|
|
========================================================= */
|
|
.history-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--ink-1);
|
|
margin-bottom: 4px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.history-sub {
|
|
font-size: 12.5px;
|
|
color: var(--ink-4);
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.history-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.history-item {
|
|
display: grid;
|
|
grid-template-columns: 40px 1fr auto auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 0;
|
|
border-bottom: 0.5px solid var(--line);
|
|
}
|
|
.history-item:last-child { border-bottom: none; }
|
|
|
|
.history-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: var(--r-md);
|
|
background: var(--expria-50);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--expria);
|
|
flex-shrink: 0;
|
|
}
|
|
.history-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 1.75;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.history-meta { min-width: 0; }
|
|
.history-type {
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
color: var(--ink-1);
|
|
margin-bottom: 2px;
|
|
}
|
|
.history-date {
|
|
font-size: 11.5px;
|
|
color: var(--ink-4);
|
|
}
|
|
|
|
.history-nclc-badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 4px 10px;
|
|
border-radius: var(--r-full);
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.history-nclc-badge.warn {
|
|
background: var(--warning-bg);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.history-score {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--ink-1);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -0.01em;
|
|
min-width: 50px;
|
|
text-align: right;
|
|
}
|
|
.history-score-max {
|
|
font-size: 11px;
|
|
color: var(--ink-5);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* =========================================================
|
|
PROCHAINE ÉTAPE
|
|
========================================================= */
|
|
.next-step {
|
|
background: linear-gradient(135deg, var(--expria-50) 0%, var(--canvas-2) 100%);
|
|
border: 0.5px solid var(--expria-100);
|
|
}
|
|
.next-step .card-label {
|
|
color: var(--expria);
|
|
}
|
|
.next-step-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--ink-1);
|
|
margin-bottom: 8px;
|
|
line-height: 1.35;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.next-step-desc {
|
|
font-size: 13px;
|
|
color: var(--ink-3);
|
|
line-height: 1.6;
|
|
margin-bottom: 18px;
|
|
}
|
|
.next-step-stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 18px;
|
|
padding: 12px 14px;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-radius: var(--r-md);
|
|
border: 0.5px solid var(--line);
|
|
}
|
|
.next-step-stat {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.next-step-stat-label {
|
|
font-size: 10px;
|
|
color: var(--ink-4);
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 3px;
|
|
}
|
|
.next-step-stat-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--ink-1);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* =========================================================
|
|
CTA BOTTOM
|
|
========================================================= */
|
|
.cta-block {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* =========================================================
|
|
PALETTE DISPLAY (bas de page)
|
|
========================================================= */
|
|
.palette-row {
|
|
margin-top: 40px;
|
|
padding: 20px 24px;
|
|
background: var(--surface);
|
|
border: 0.5px solid var(--line);
|
|
border-radius: var(--r-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.palette-title {
|
|
font-size: 11px;
|
|
color: var(--ink-4);
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 14px;
|
|
}
|
|
.palette-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.palette-swatch {
|
|
text-align: left;
|
|
}
|
|
.palette-color {
|
|
height: 40px;
|
|
border-radius: var(--r-sm);
|
|
border: 0.5px solid var(--line);
|
|
margin-bottom: 6px;
|
|
}
|
|
.palette-name {
|
|
font-size: 11px;
|
|
color: var(--ink-2);
|
|
font-weight: 600;
|
|
font-family: "SF Mono", monospace;
|
|
}
|
|
.palette-role {
|
|
font-size: 10px;
|
|
color: var(--ink-4);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* =========================================================
|
|
RESPONSIVE
|
|
========================================================= */
|
|
@media (max-width: 960px) {
|
|
.app { grid-template-columns: 1fr; }
|
|
.sidebar { display: none; }
|
|
.main { padding: 24px; }
|
|
.metrics { grid-template-columns: 1fr; }
|
|
.row-2 { grid-template-columns: 1fr; }
|
|
.page-header { flex-direction: column; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.da-header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
|
|
.page-title { font-size: 22px; }
|
|
.metric-card .metric-value { font-size: 28px; }
|
|
.cta-block { flex-direction: column; }
|
|
.cta-block .btn { width: 100%; }
|
|
.history-item { grid-template-columns: 36px 1fr auto; }
|
|
.history-nclc-badge { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Bandeau de présentation de la direction -->
|
|
<div class="da-header">
|
|
<div class="da-header-inner">
|
|
<div>
|
|
<div class="da-header-title">Direction H — Juste milieu</div>
|
|
<div class="da-header-subtitle">Entre Boréal (trop blanc) et Cadence (trop sombre). Fond gris-bleuté, cards blanches en relief, bleu Expria pivot, accents bleu-nuit.</div>
|
|
</div>
|
|
<div class="da-header-tag">Version recommandée</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app">
|
|
|
|
<!-- =====================================================
|
|
SIDEBAR
|
|
====================================================== -->
|
|
<aside class="sidebar">
|
|
<div class="logo">
|
|
<div class="logo-mark">EX</div>
|
|
<span>Expria</span>
|
|
</div>
|
|
|
|
<nav class="nav-group">
|
|
<div class="nav-group-label">Espace de travail</div>
|
|
<a class="nav-item active" href="#">
|
|
<svg viewBox="0 0 24 24"><path d="M3 12l9-9 9 9"/><path d="M5 10v10a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1V10"/></svg>
|
|
Tableau de bord
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h8M8 9h2"/></svg>
|
|
Simulations
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20z"/><path d="M12 6v6l4 2"/></svg>
|
|
Historique
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24"><path d="M12 15l-3-3 3-3M3 12h12a6 6 0 010 12"/></svg>
|
|
Rapports
|
|
</a>
|
|
</nav>
|
|
|
|
<nav class="nav-group">
|
|
<div class="nav-group-label">Préparation</div>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24"><path d="M21 5l-9-3-9 3v6a12 12 0 009 11 12 12 0 009-11V5z"/></svg>
|
|
Mode examen
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
|
|
Guide TCF
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="user-card">
|
|
<div class="user-avatar">HM</div>
|
|
<div class="user-meta">
|
|
<div class="user-name">Hermann Mbanga</div>
|
|
<div class="user-plan">Plan Découverte</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- =====================================================
|
|
MAIN
|
|
====================================================== -->
|
|
<main class="main">
|
|
|
|
<div class="page-header">
|
|
<div class="page-title-block">
|
|
<div class="page-eyebrow">Mercredi 17 avril</div>
|
|
<h1 class="page-title">Bonjour Hermann</h1>
|
|
<p class="page-sub">Vous progressez bien. Plus que deux simulations pour atteindre votre objectif NCLC 9.</p>
|
|
</div>
|
|
<div class="cta-block">
|
|
<button class="btn btn-ghost">Voir mon profil</button>
|
|
<button class="btn btn-primary">
|
|
Nouvelle simulation
|
|
<span class="btn-arrow">→</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Métriques -->
|
|
<div class="metrics">
|
|
|
|
<div class="card metric-card card-raised">
|
|
<div class="card-label">Simulations restantes</div>
|
|
<div class="metric-value">3<span class="metric-value-unit"> / 5</span></div>
|
|
<div class="progress"><div class="progress-fill" style="width: 60%"></div></div>
|
|
<div class="metric-sub">Plan Découverte — renouvellement à chaque upgrade</div>
|
|
</div>
|
|
|
|
<div class="card metric-card card-raised">
|
|
<div class="card-label">Niveau estimé</div>
|
|
<div class="metric-value">NCLC 8</div>
|
|
<div class="progress"><div class="progress-fill" style="width: 75%"></div></div>
|
|
<div class="metric-sub">Moyenne des 3 dernières simulations · Objectif NCLC 9</div>
|
|
</div>
|
|
|
|
<div class="card metric-card-plan">
|
|
<div class="card-label">Plan actuel</div>
|
|
<div class="plan-name">Découverte</div>
|
|
<div class="plan-desc">Débloquez des simulations illimitées, le Mode Examen et le T2 Live avec Standard ou Premium.</div>
|
|
<a href="#" class="btn-upgrade">
|
|
Passer à Standard
|
|
<span style="font-size: 14px; line-height: 1;">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Row 2 colonnes -->
|
|
<div class="row-2">
|
|
|
|
<!-- Historique -->
|
|
<div class="card">
|
|
<div class="history-title">Simulations récentes</div>
|
|
<div class="history-sub">Vos 3 dernières corrections</div>
|
|
|
|
<div class="history-list">
|
|
|
|
<div class="history-item">
|
|
<div class="history-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5z"/></svg>
|
|
</div>
|
|
<div class="history-meta">
|
|
<div class="history-type">Expression écrite — Tâche 2</div>
|
|
<div class="history-date">Aujourd'hui · 09:42</div>
|
|
</div>
|
|
<div class="history-nclc-badge">NCLC 9</div>
|
|
<div class="history-score">16<span class="history-score-max">/20</span></div>
|
|
</div>
|
|
|
|
<div class="history-item">
|
|
<div class="history-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 11-14 0v-2M12 19v4M8 23h8"/></svg>
|
|
</div>
|
|
<div class="history-meta">
|
|
<div class="history-type">Expression orale — Tâche 1</div>
|
|
<div class="history-date">Il y a 2 jours</div>
|
|
</div>
|
|
<div class="history-nclc-badge warn">NCLC 8</div>
|
|
<div class="history-score">14<span class="history-score-max">/20</span></div>
|
|
</div>
|
|
|
|
<div class="history-item">
|
|
<div class="history-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5z"/></svg>
|
|
</div>
|
|
<div class="history-meta">
|
|
<div class="history-type">Expression écrite — Tâche 3</div>
|
|
<div class="history-date">Il y a 5 jours</div>
|
|
</div>
|
|
<div class="history-nclc-badge">NCLC 9</div>
|
|
<div class="history-score">15<span class="history-score-max">/20</span></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prochaine étape -->
|
|
<div class="card next-step">
|
|
<div class="card-label">Prochaine étape recommandée</div>
|
|
<div class="next-step-title">Travaillez la tâche 2 à l'oral</div>
|
|
<div class="next-step-desc">
|
|
Votre dernier score à l'EO T2 (14/20) est en dessous de votre moyenne. Une simulation de 10 minutes suffit pour consolider.
|
|
</div>
|
|
|
|
<div class="next-step-stats">
|
|
<div class="next-step-stat">
|
|
<div class="next-step-stat-label">Durée</div>
|
|
<div class="next-step-stat-value">10 min</div>
|
|
</div>
|
|
<div class="next-step-stat">
|
|
<div class="next-step-stat-label">Difficulté</div>
|
|
<div class="next-step-stat-value">Modérée</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" style="width: 100%;">
|
|
Commencer maintenant
|
|
<span class="btn-arrow">→</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Palette -->
|
|
<div class="palette-row">
|
|
<div class="palette-title">Palette de la direction H</div>
|
|
<div class="palette-grid">
|
|
<div class="palette-swatch">
|
|
<div class="palette-color" style="background: #EEF2F8;"></div>
|
|
<div class="palette-name">#EEF2F8</div>
|
|
<div class="palette-role">Fond principal</div>
|
|
</div>
|
|
<div class="palette-swatch">
|
|
<div class="palette-color" style="background: #FFFFFF; border-color: #C7D0E0;"></div>
|
|
<div class="palette-name">#FFFFFF</div>
|
|
<div class="palette-role">Cards (blanc franc)</div>
|
|
</div>
|
|
<div class="palette-swatch">
|
|
<div class="palette-color" style="background: #1B4FD8;"></div>
|
|
<div class="palette-name">#1B4FD8</div>
|
|
<div class="palette-role">Bleu Expria — pivot</div>
|
|
</div>
|
|
<div class="palette-swatch">
|
|
<div class="palette-color" style="background: #0B1F5C;"></div>
|
|
<div class="palette-name">#0B1F5C</div>
|
|
<div class="palette-role">Bleu nuit — premium</div>
|
|
</div>
|
|
<div class="palette-swatch">
|
|
<div class="palette-color" style="background: #0F172A;"></div>
|
|
<div class="palette-name">#0F172A</div>
|
|
<div class="palette-role">Titres</div>
|
|
</div>
|
|
<div class="palette-swatch">
|
|
<div class="palette-color" style="background: #475569;"></div>
|
|
<div class="palette-name">#475569</div>
|
|
<div class="palette-role">Corps</div>
|
|
</div>
|
|
<div class="palette-swatch">
|
|
<div class="palette-color" style="background: #0E9F6E;"></div>
|
|
<div class="palette-name">#0E9F6E</div>
|
|
<div class="palette-role">Succès</div>
|
|
</div>
|
|
<div class="palette-swatch">
|
|
<div class="palette-color" style="background: #C77A00;"></div>
|
|
<div class="palette-name">#C77A00</div>
|
|
<div class="palette-role">Attention</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|