feat(auth): useAuth + ProtectedRoute + signUp dans auth-client (Sprint 1 étape 2)
This commit is contained in:
parent
107a37d197
commit
38777796aa
19 changed files with 2620 additions and 191 deletions
927
design-reference/direction-h-dark.html
Normal file
927
design-reference/direction-h-dark.html
Normal file
|
|
@ -0,0 +1,927 @@
|
|||
<!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 : Mode sombre</title>
|
||||
<style>
|
||||
/* =========================================================
|
||||
DIRECTION H — MODE SOMBRE
|
||||
Inversion réfléchie de la palette claire :
|
||||
- Fond bleu-nuit désaturé (pas noir pur = fatigue visuelle)
|
||||
- Cards en bleu-slate légèrement plus clair pour ressortir
|
||||
- Bleu Expria remonté en luminance (lisibilité sur fond sombre)
|
||||
- Hairlines plus visibles qu'en clair pour structurer
|
||||
- Titres en blanc cassé (jamais pur blanc = trop agressif)
|
||||
========================================================= */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
/* Fonds — hiérarchie 3 niveaux pour créer la profondeur */
|
||||
--canvas: #0D1220; /* fond global, bleu-nuit désaturé */
|
||||
--canvas-2: #121A2D; /* séparations, fond hover sidebar */
|
||||
--surface: #182238; /* cards — ressortent nettement */
|
||||
--surface-hover: #1E2A42; /* cards au survol */
|
||||
--surface-raised: #1F2B45; /* cards surélevées (plan premium) */
|
||||
|
||||
/* Hairlines — plus visibles qu'en clair, structure l'œil */
|
||||
--line: #27324B;
|
||||
--line-strong: #364363;
|
||||
|
||||
/* Encres — blanc cassé pour confort visuel, jamais pur blanc */
|
||||
--ink-1: #F1F4FA; /* titres forts — très blanc mais chaud */
|
||||
--ink-2: #DDE3EF; /* corps principal */
|
||||
--ink-3: #A8B2C7; /* secondaire */
|
||||
--ink-4: #7A8499; /* tertiaire, labels */
|
||||
--ink-5: #525C73; /* désactivé, hints */
|
||||
|
||||
/* Brand Expria — remonté en luminance pour rester lisible sur sombre */
|
||||
--expria: #5B7FFF; /* #1B4FD8 brightened pour dark mode */
|
||||
--expria-hover: #6F8EFF;
|
||||
--expria-dim: #3A5DD9; /* variante pour fonds/backgrounds */
|
||||
--expria-bg: rgba(91, 127, 255, 0.12); /* wash très léger */
|
||||
--expria-bg-2: rgba(91, 127, 255, 0.18);
|
||||
|
||||
/* Bleu nuit — utilisé inversement en clair : ici en accent très foncé */
|
||||
--deep: #060B1A; /* plus profond que canvas, pour contraster */
|
||||
|
||||
/* Sémantiques — versions dark mode (fonds sombres transparents) */
|
||||
--success: #3DD68C;
|
||||
--success-bg: rgba(61, 214, 140, 0.12);
|
||||
--warning: #F5B849;
|
||||
--warning-bg: rgba(245, 184, 73, 0.12);
|
||||
--danger: #F06B6B;
|
||||
--danger-bg: rgba(240, 107, 107, 0.12);
|
||||
|
||||
/* Élévations — jouer sur les surfaces plus que les ombres */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* Rayons — identiques à light */
|
||||
--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-bg);
|
||||
padding: 5px 12px;
|
||||
border-radius: var(--r-full);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
border: 0.5px solid rgba(91, 127, 255, 0.3);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
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: var(--canvas);
|
||||
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(--expria);
|
||||
color: var(--canvas);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.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: var(--canvas);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--expria-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(91, 127, 255, 0.35);
|
||||
}
|
||||
.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);
|
||||
color: var(--ink-1);
|
||||
}
|
||||
.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, background 0.2s;
|
||||
}
|
||||
.card-raised {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.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
|
||||
Inversion du light mode : ici on montre un fond bleu saturé
|
||||
avec le brand, au lieu du bleu nuit/deep */
|
||||
.metric-card-plan {
|
||||
background:
|
||||
radial-gradient(circle at 80% -30%, rgba(91, 127, 255, 0.4), transparent 60%),
|
||||
linear-gradient(135deg, #1E2A52 0%, #2C3E7A 100%);
|
||||
border: 0.5px solid rgba(91, 127, 255, 0.4);
|
||||
color: var(--ink-1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.metric-card-plan .card-label {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
.metric-card-plan .plan-name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 4px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.metric-card-plan .plan-desc {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
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: var(--canvas);
|
||||
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: var(--expria-hover);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
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-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--expria);
|
||||
flex-shrink: 0;
|
||||
border: 0.5px solid rgba(91, 127, 255, 0.25);
|
||||
}
|
||||
.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;
|
||||
border: 0.5px solid rgba(61, 214, 140, 0.25);
|
||||
}
|
||||
.history-nclc-badge.warn {
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning);
|
||||
border-color: rgba(245, 184, 73, 0.25);
|
||||
}
|
||||
|
||||
.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, rgba(91, 127, 255, 0.08) 0%, rgba(24, 34, 56, 1) 100%);
|
||||
border: 0.5px solid rgba(91, 127, 255, 0.25);
|
||||
}
|
||||
.next-step:hover {
|
||||
background: linear-gradient(135deg, rgba(91, 127, 255, 0.12) 0%, rgba(30, 42, 66, 1) 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(13, 18, 32, 0.5);
|
||||
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", ui-monospace, Menlo, Consolas, 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 — Mode sombre</div>
|
||||
<div class="da-header-subtitle">Inversion réfléchie de la version claire. Fond bleu-nuit désaturé, cards qui ressortent, bleu Expria remonté en luminance pour rester lisible.</div>
|
||||
</div>
|
||||
<div class="da-header-tag">Mode sombre</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 — mode sombre</div>
|
||||
<div class="palette-grid">
|
||||
<div class="palette-swatch">
|
||||
<div class="palette-color" style="background: #0D1220;"></div>
|
||||
<div class="palette-name">#0D1220</div>
|
||||
<div class="palette-role">Fond principal</div>
|
||||
</div>
|
||||
<div class="palette-swatch">
|
||||
<div class="palette-color" style="background: #182238;"></div>
|
||||
<div class="palette-name">#182238</div>
|
||||
<div class="palette-role">Cards surface</div>
|
||||
</div>
|
||||
<div class="palette-swatch">
|
||||
<div class="palette-color" style="background: #5B7FFF;"></div>
|
||||
<div class="palette-name">#5B7FFF</div>
|
||||
<div class="palette-role">Bleu Expria — remonté</div>
|
||||
</div>
|
||||
<div class="palette-swatch">
|
||||
<div class="palette-color" style="background: #27324B; border-color: #5B7FFF;"></div>
|
||||
<div class="palette-name">#27324B</div>
|
||||
<div class="palette-role">Hairlines</div>
|
||||
</div>
|
||||
<div class="palette-swatch">
|
||||
<div class="palette-color" style="background: #F1F4FA;"></div>
|
||||
<div class="palette-name">#F1F4FA</div>
|
||||
<div class="palette-role">Titres</div>
|
||||
</div>
|
||||
<div class="palette-swatch">
|
||||
<div class="palette-color" style="background: #A8B2C7;"></div>
|
||||
<div class="palette-name">#A8B2C7</div>
|
||||
<div class="palette-role">Corps secondaire</div>
|
||||
</div>
|
||||
<div class="palette-swatch">
|
||||
<div class="palette-color" style="background: #3DD68C;"></div>
|
||||
<div class="palette-name">#3DD68C</div>
|
||||
<div class="palette-role">Succès</div>
|
||||
</div>
|
||||
<div class="palette-swatch">
|
||||
<div class="palette-color" style="background: #F5B849;"></div>
|
||||
<div class="palette-name">#F5B849</div>
|
||||
<div class="palette-role">Attention</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
921
design-reference/direction-h-juste-milieu.html
Normal file
921
design-reference/direction-h-juste-milieu.html
Normal file
|
|
@ -0,0 +1,921 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue