https://docs.google.com/spreadsheets/d/1cD_Tl3d5Zu43WqdpYmQ8sLUcxTAEi7VxeUGzDffhaGw/edit?usp=sharing

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
–navy: #0F2240;
–blue: #1A5CFF;
–blue-lt: #E8EFFF;
–teal: #00B894;
–teal-lt: #DFF7F1;
–amber: #F59E0B;
–amber-lt:#FEF3C7;
–coral: #EF4444;
–coral-lt:#FEE2E2;
–ink: #1C1C1E;
–ink-2: #4B5563;
–ink-3: #9CA3AF;
–line: #E5E7EB;
–surface: #F8F9FB;
–white: #FFFFFF;
–mono: ‘JetBrains Mono’, monospace;
–sans: ‘Inter’, system-ui, sans-serif;
–radius: 10px;
–shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}
html { scroll-behavior: smooth; }
body {
font-family: var(–sans);
font-size: 15px;
color: var(–ink);
background: var(–surface);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* ── HERO ── */
.hero {
background: var(–navy);
color: #fff;
padding: 64px 24px 56px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: ”;
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% -10%, #1A5CFF22, transparent);
pointer-events: none;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: #7BA4FF;
background: rgba(26,92,255,.15);
border: 1px solid rgba(26,92,255,.3);
border-radius: 20px; padding: 4px 12px;
margin-bottom: 20px;
}
.hero h1 {
font-size: clamp(26px, 5vw, 40px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.02em;
max-width: 680px;
margin: 0 auto 14px;
}
.hero h1 span { color: #7BA4FF; }
.hero-sub {
font-size: 16px; color: #94A3B8;
max-width: 520px; margin: 0 auto 32px;
}
.hero-meta {
display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
.meta-pill {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 500; color: #CBD5E1;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px; padding: 5px 14px;
}
.meta-pill svg { width: 14px; height: 14px; opacity: .7; }
.hero-dl {
margin-top: 32px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero-dl-btn {
display: inline-flex; align-items: center; gap: 10px;
background: #fff; color: var(–navy);
border: none; border-radius: 10px;
padding: 14px 28px;
font-size: 15px; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.hero-dl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.hero-dl-btn:active { transform: translateY(0); }
.hero-dl-hint {
font-size: 12px; color: #64748B;
}
/* ── PROGRESS NAV ── */
.progress-nav {
background: var(–white);
border-bottom: 1px solid var(–line);
padding: 0 24px;
position: sticky; top: 0; z-index: 100;
}
.progress-inner {
max-width: 900px; margin: 0 auto;
display: flex; align-items: center; gap: 0;
overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.progress-inner::-webkit-scrollbar { display: none; }
.nav-step {
display: flex; align-items: center; gap: 8px;
padding: 14px 16px;
font-size: 12px; font-weight: 500; color: var(–ink-3);
white-space: nowrap; cursor: pointer;
border-bottom: 2px solid transparent;
transition: all .2s;
text-decoration: none;
}
.nav-step:hover { color: var(–blue); }
.nav-step.active { color: var(–blue); border-bottom-color: var(–blue); }
.nav-dot {
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 600;
background: var(–line); color: var(–ink-3);
flex-shrink: 0; transition: all .2s;
}
.nav-step.active .nav-dot, .nav-step.done .nav-dot {
background: var(–blue); color: #fff;
}
.nav-step.done .nav-dot::after { content: ‘✓’; }
.nav-step.done .nav-dot span { display: none; }
/* ── LAYOUT ── */
.page { max-width: 900px; margin: 0 auto; padding: 48px 24px 80px; }
/* ── SECTION TITLES ── */
.section-label {
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(–blue); margin-bottom: 8px;
}
.section-title {
font-size: 22px; font-weight: 600; color: var(–ink);
letter-spacing: -.01em; margin-bottom: 6px;
}
.section-desc { font-size: 14px; color: var(–ink-2); margin-bottom: 28px; }
/* ── CONTEXT CARD ── */
.context-card {
background: var(–white);
border: 1px solid var(–line);
border-left: 4px solid var(–blue);
border-radius: var(–radius);
padding: 20px 24px;
margin-bottom: 40px;
box-shadow: var(–shadow);
}
.context-card p { font-size: 14px; color: var(–ink-2); line-height: 1.7; }
.context-card strong { color: var(–ink); font-weight: 600; }
/* ── STEP CARDS ── */
.steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.step-card {
background: var(–white);
border: 1px solid var(–line);
border-radius: var(–radius);
box-shadow: var(–shadow);
overflow: hidden;
transition: box-shadow .2s;
}
.step-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); }
.step-header {
display: flex; align-items: flex-start; gap: 16px;
padding: 20px 24px;
cursor: pointer;
user-select: none;
}
.step-num {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
flex-shrink: 0; margin-top: 1px;
}
.s1 { background: var(–blue-lt); color: var(–blue); }
.s2 { background: var(–teal-lt); color: #00875A; }
.s3 { background: var(–amber-lt); color: #92400E; }
.s4 { background: #F3E8FF; color: #6D28D9; }
.s5 { background: var(–coral-lt); color: #B91C1C; }
.step-text { flex: 1; }
.step-title-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.step-title { font-size: 15px; font-weight: 600; color: var(–ink); }
.step-tag {
font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 8px; border-radius: 4px;
flex-shrink: 0;
}
.tag-audit { background: var(–blue-lt); color: var(–blue); }
.tag-formules { background: var(–teal-lt); color: #00875A; }
.tag-tcd { background: var(–amber-lt); color: #92400E; }
.tag-analyse { background: #F3E8FF; color: #6D28D9; }
.tag-synthese { background: var(–coral-lt); color: #B91C1C; }
.step-desc-short { font-size: 13px; color: var(–ink-2); margin-top: 4px; }
.chevron {
width: 18px; height: 18px; color: var(–ink-3);
transition: transform .25s; flex-shrink: 0; margin-top: 6px;
}
.step-card.open .chevron { transform: rotate(180deg); }
.step-body {
display: none;
padding: 0 24px 24px 72px;
border-top: 1px solid var(–line);
}
.step-card.open .step-body { display: block; }
.step-body-inner { padding-top: 20px; }
.prompt-label {
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(–blue); margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.prompt-box {
background: #F8FAFF;
border: 1px solid #C7D8FF;
border-left: 3px solid var(–blue);
border-radius: 0 var(–radius) var(–radius) 0;
padding: 14px 16px;
font-family: var(–mono);
font-size: 12.5px; line-height: 1.7;
color: var(–ink);
position: relative;
margin-bottom: 14px;
}
.copy-btn {
position: absolute; top: 10px; right: 10px;
background: var(–white); border: 1px solid var(–line);
border-radius: 6px; padding: 4px 10px;
font-size: 11px; font-weight: 500; color: var(–ink-2);
cursor: pointer; display: flex; align-items: center; gap: 5px;
transition: all .15s; font-family: var(–sans);
}
.copy-btn:hover { background: var(–blue-lt); color: var(–blue); border-color: #C7D8FF; }
.copy-btn.copied { color: var(–teal); border-color: var(–teal-lt); background: var(–teal-lt); }
.tip-list { list-style: none; margin-top: 12px; }
.tip-list li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 13px; color: var(–ink-2);
padding: 4px 0;
}
.tip-list li::before {
content: ‘→’; color: var(–blue);
font-weight: 600; flex-shrink: 0; margin-top: 1px;
}
.objective-box {
display: flex; align-items: flex-start; gap: 10px;
background: var(–teal-lt);
border-radius: 8px; padding: 12px 14px;
font-size: 13px; color: #065F46;
margin-top: 14px;
}
.objective-box::before { content: ‘🎯’; flex-shrink: 0; }
/* ── DATA PREVIEW ── */
.data-section { margin-bottom: 48px; }
.toggle-data {
display: inline-flex; align-items: center; gap: 8px;
background: var(–white); border: 1px solid var(–line);
border-radius: var(–radius); padding: 10px 18px;
font-size: 13px; font-weight: 500; color: var(–ink-2);
cursor: pointer; transition: all .2s;
box-shadow: var(–shadow);
}
.toggle-data:hover { background: var(–blue-lt); color: var(–blue); border-color: #C7D8FF; }
.toggle-data svg { width: 15px; height: 15px; transition: transform .2s; }
.toggle-data.open svg { transform: rotate(180deg); }
.data-preview { display: none; margin-top: 16px; }
.data-preview.visible { display: block; }
.table-wrap { overflow-x: auto; border-radius: var(–radius); box-shadow: var(–shadow); }
table { width: 100%; border-collapse: collapse; background: var(–white); font-size: 13px; }
thead tr { background: var(–navy); }
thead th {
color: #fff; font-weight: 600; font-size: 11px; letter-spacing: .04em;
padding: 10px 14px; text-align: left; white-space: nowrap;
}
tbody tr:nth-child(even) { background: var(–surface); }
tbody tr:hover { background: var(–blue-lt); }
tbody td { padding: 8px 14px; color: var(–ink); border-bottom: 1px solid var(–line); }
.err-cell { background: #FEF9C3; color: #92400E; font-family: var(–mono); font-size: 12px; }
.table-note {
font-size: 12px; color: var(–ink-3);
padding: 10px 14px;
background: var(–white);
border-top: 1px dashed var(–line);
}
/* ── ERRORS GRID ── */
.errors-section { margin-bottom: 48px; }
.errors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px; margin-top: 16px;
}
.error-card {
background: var(–white);
border: 1px solid var(–line);
border-radius: var(–radius);
padding: 14px 16px;
box-shadow: var(–shadow);
}
.error-type {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
margin-bottom: 6px;
}
.error-card h4 { font-size: 13px; font-weight: 600; color: var(–ink); margin-bottom: 4px; }
.error-card p { font-size: 12px; color: var(–ink-2); }
.et-dup { color: #B91C1C; }
.et-miss { color: #92400E; }
.et-fmt { color: #6D28D9; }
/* ── DELIVERABLES ── */
.deliverables-section { margin-bottom: 48px; }
.del-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px; margin-top: 16px;
}
.del-card {
background: var(–white);
border: 1px solid var(–line);
border-radius: var(–radius);
padding: 18px 16px;
text-align: center;
box-shadow: var(–shadow);
transition: transform .2s, box-shadow .2s;
}
.del-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.del-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px; margin: 0 auto 10px;
}
.di-green { background: var(–teal-lt); }
.di-blue { background: var(–blue-lt); }
.di-amber { background: var(–amber-lt); }
.di-purple{ background: #F3E8FF; }
.del-card h4 { font-size: 13px; font-weight: 600; color: var(–ink); margin-bottom: 4px; }
.del-card p { font-size: 12px; color: var(–ink-2); }
/* ── EVALUATION ── */
.eval-section { margin-bottom: 48px; }
.eval-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px; margin-top: 16px;
}
.eval-card {
background: var(–white);
border: 1px solid var(–line);
border-radius: var(–radius);
padding: 18px 16px;
box-shadow: var(–shadow);
position: relative; overflow: hidden;
}
.eval-card::before {
content: ”; position: absolute; top: 0; left: 0; right: 0;
height: 3px;
}
.ev1::before { background: var(–blue); }
.ev2::before { background: var(–teal); }
.ev3::before { background: var(–amber); }
.ev4::before { background: #8B5CF6; }
.eval-card .pts {
font-size: 28px; font-weight: 700; color: var(–ink);
letter-spacing: -.02em; line-height: 1;
margin-bottom: 6px;
}
.eval-card .pts span { font-size: 14px; font-weight: 400; color: var(–ink-3); }
.eval-card h4 { font-size: 13px; font-weight: 600; color: var(–ink); margin-bottom: 4px; }
.eval-card p { font-size: 12px; color: var(–ink-2); }
/* ── TIPS ── */
.tips-section {
background: var(–white);
border: 1px solid var(–line);
border-radius: var(–radius);
padding: 24px 28px;
box-shadow: var(–shadow);
margin-bottom: 48px;
}
.tips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; }
.tip-item {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px; color: var(–ink-2); padding: 8px 0;
}
.tip-check {
width: 20px; height: 20px; border-radius: 50%;
background: var(–teal-lt); color: var(–teal);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
/* ── DOWNLOAD ── */
.download-bar {
background: linear-gradient(135deg, #0F2240, #1A3A6E);
border-radius: var(–radius);
padding: 24px 28px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
margin-bottom: 48px;
}
.download-bar h3 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.download-bar p { font-size: 13px; color: #94A3B8; }
.download-btn {
display: inline-flex; align-items: center; gap: 8px;
background: var(–blue); color: #fff;
border: none; border-radius: 8px;
padding: 11px 22px;
font-size: 13px; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: background .2s, transform .15s;
white-space: nowrap;
}
.download-btn:hover { background: #1248DB; transform: translateY(-1px); }
.download-btn svg { width: 16px; height: 16px; }
/* ── RESPONSIVE ── */
@media (max-width: 640px) {
.hero { padding: 48px 16px 40px; }
.page { padding: 32px 16px 60px; }
.step-body { padding: 0 16px 20px 16px; }
.step-header { padding: 16px; }
.progress-nav { display: none; }
.del-grid, .eval-grid, .errors-grid { grid-template-columns: 1fr 1fr; }
}
/* ── PRINT ── */
@media print {
.progress-nav, .copy-btn, .download-bar, .toggle-data { display: none !important; }
.step-body { display: block !important; }
body { background: #fff; }
.step-card { box-shadow: none; border: 1px solid #ddd; }
}
/* ── DOWNLOAD CARD ── */
.download-card {{
background: var(–white);
border: 1px solid var(–line);
border-radius: var(–radius);
padding: 24px 28px;
box-shadow: var(–shadow);
display: flex; align-items: flex-start; justify-content: space-between;
flex-wrap: wrap; gap: 20px;
margin-bottom: 16px;
}}
.dl-file-info {{ display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 200px; }}
.dl-icon-wrap {{
width: 52px; height: 52px; border-radius: 12px;
background: #E8F5E9; color: #2E7D32;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}}
.dl-meta {{ display: flex; flex-direction: column; gap: 4px; }}
.dl-filename {{ font-size: 15px; font-weight: 600; color: var(–ink); font-family: var(–mono); }}
.dl-details {{ font-size: 12px; color: var(–ink-3); }}
.dl-badges {{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }}
.dl-badge {{
font-size: 11px; font-weight: 500; padding: 2px 8px;
border-radius: 4px; background: var(–blue-lt); color: var(–blue);
}}
.dl-badge-guide {{ background: var(–amber-lt); color: #92400E; }}
.dl-actions {{ display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }}
.dl-note {{ font-size: 11px; color: var(–ink-3); text-align: right; }}
.dl-instructions {{
display: flex; flex-direction: column; gap: 10px;
}}
.dl-instr-item {{
display: flex; align-items: center; gap: 12px;
background: var(–surface); border: 1px solid var(–line);
border-radius: 8px; padding: 12px 16px;
font-size: 13px; color: var(–ink-2);
}}
.dl-instr-item strong {{ color: var(–ink); font-weight: 600; }}
.dl-instr-num {{
width: 24px; height: 24px; border-radius: 50%;
background: var(–navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0;
}}