1756 lines
60 KiB
HTML
1756 lines
60 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bilan de compétences C1-C6 - Mercredi 4</title>
|
|
<!-- Fonts Google -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tabler Icons CSS CDN -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
|
|
|
|
:root {
|
|
/* Theme core colors (Indigo/Violet) */
|
|
--primary-hsl: 247, 80%, 62%;
|
|
--primary: hsl(var(--primary-hsl));
|
|
--primary-light: hsl(247, 85%, 96%);
|
|
--primary-dark: hsl(247, 80%, 35%);
|
|
|
|
/* Neutral colors - Clean & Premium Cool Grays */
|
|
--bg-primary: #f8fafc;
|
|
--bg-secondary: #ffffff;
|
|
--bg-tertiary: #f1f5f9;
|
|
|
|
--color-text-primary: #0f172a;
|
|
--color-text-secondary: #475569;
|
|
--color-text-tertiary: #94a3b8;
|
|
|
|
--color-border-primary: #f1f5f9;
|
|
--color-border-secondary: #e2e8f0;
|
|
--color-border-tertiary: #e2e8f0;
|
|
|
|
--border-radius-sm: 8px;
|
|
--border-radius-md: 14px;
|
|
--border-radius-lg: 18px;
|
|
|
|
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
|
|
--shadow-lg: 0 12px 20px -3px rgba(0, 0, 0, 0.05), 0 4px 8px -4px rgba(0, 0, 0, 0.05);
|
|
|
|
/* Warning Accent (Red/Orange) */
|
|
--color-a-bg: #FCEBEB;
|
|
--color-a-border: #F09595;
|
|
--color-a-accent: #A32D2D;
|
|
--color-a-dark: #791F1F;
|
|
|
|
/* Backward compatibility */
|
|
--font-sans: 'Nunito', sans-serif;
|
|
--color-background-secondary: var(--bg-secondary);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--color-text-primary);
|
|
font-family: 'Nunito', sans-serif;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image:
|
|
radial-gradient(at 0% 0%, hsla(247, 80%, 62%, 0.04) 0px, transparent 50%),
|
|
radial-gradient(at 100% 0%, hsla(162, 75%, 34%, 0.01) 0px, transparent 50%),
|
|
radial-gradient(at 50% 100%, hsla(36, 90%, 45%, 0.02) 0px, transparent 50%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.w {
|
|
font-family: var(--font-sans);
|
|
color: var(--color-text-primary);
|
|
max-width: 960px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 2.5rem 24px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dh {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
padding-bottom: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dk {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .2em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dt {
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
color: var(--color-text-primary);
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.hbadge {
|
|
background: var(--primary-light);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 10px 18px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.hbt {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-dark);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.hbv {
|
|
font-size: 1.25rem;
|
|
font-weight: 900;
|
|
color: var(--primary-dark);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.id-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.idf {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 10px 14px;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.idf:focus-within {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12), var(--shadow-md);
|
|
}
|
|
|
|
.ifl {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .10em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ifi {
|
|
border: none;
|
|
background: transparent;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 0.9rem;
|
|
color: var(--color-text-primary);
|
|
padding: 2px 0 0 0;
|
|
width: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
.ifi::placeholder {
|
|
color: var(--color-text-tertiary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.notice {
|
|
background: var(--primary-light);
|
|
border-left: 4px solid var(--primary);
|
|
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
|
|
padding: 14px 20px;
|
|
margin-bottom: 2rem;
|
|
box-shadow: var(--shadow-sm);
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.notice i {
|
|
color: var(--primary);
|
|
font-size: 1.3rem;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.notice p {
|
|
font-size: 0.9rem;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.notice strong {
|
|
color: var(--color-text-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.radar-wrap {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.radar-wrap:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.radar-head {
|
|
background: var(--primary-light);
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
padding: 14px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.radar-lbl {
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.radar-body {
|
|
padding: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.radar-legend {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
padding: 0 16px 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rl-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.rl-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dot-self {
|
|
background: #534AB7;
|
|
}
|
|
|
|
.dot-peer {
|
|
background: #3B6D11;
|
|
}
|
|
|
|
.dot-ref {
|
|
background: #854F0B;
|
|
}
|
|
|
|
.comp-blocks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.cb {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.cb:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.cb-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 20px;
|
|
background: var(--primary-light);
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
}
|
|
|
|
.cb-badge {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.bb1 { background: #EEEDFE; color: #534AB7; border: 1px solid #C7C3FA; }
|
|
.bb2 { background: #E1F5EE; color: #085041; border: 1px solid #A2E0CB; }
|
|
.bb3 { background: #FCEBEB; color: #A32D2D; border: 1px solid #F09595; }
|
|
.bb4 { background: #EEEDFE; color: #534AB7; border: 1px solid #C7C3FA; }
|
|
.bb5 { background: #EAF3DE; color: #27500A; border: 1px solid #B7DF81; }
|
|
.bb6 { background: #FAEEDA; color: #854F0B; border: 1px solid #F3CF98; }
|
|
|
|
.cb-meta {
|
|
flex: 1;
|
|
}
|
|
|
|
.cb-num {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.cb-title {
|
|
font-size: 0.95rem;
|
|
font-weight: 800;
|
|
color: var(--color-text-primary);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.cb-sub {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-secondary);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.cb-scores {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.score-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.sc-lbl {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: .05em;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.sc-opts {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.sc-opt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sc-opt input {
|
|
accent-color: var(--primary);
|
|
width: 14px;
|
|
height: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sc-opt span {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.sc-opt-g input {
|
|
accent-color: #3B6D11;
|
|
}
|
|
|
|
.sc-opt-a input {
|
|
accent-color: #854F0B;
|
|
}
|
|
|
|
.cb-body {
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.cb-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.cb-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.cf-lbl {
|
|
font-size: 0.7rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ta {
|
|
width: 100%;
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
background: var(--bg-primary);
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-primary);
|
|
padding: 10px 14px;
|
|
resize: vertical;
|
|
outline: none;
|
|
line-height: 1.6;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.ta:focus {
|
|
border-color: var(--primary);
|
|
background: var(--bg-secondary);
|
|
box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12), var(--shadow-md);
|
|
}
|
|
|
|
.ta::placeholder {
|
|
color: var(--color-text-tertiary);
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.statut-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-opt {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: 20px;
|
|
padding: 6px 12px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.stat-opt:hover {
|
|
border-color: var(--primary);
|
|
background: var(--primary-light);
|
|
}
|
|
|
|
.stat-opt input {
|
|
width: 14px;
|
|
height: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stat-opt input.s-green {
|
|
accent-color: #3B6D11;
|
|
}
|
|
|
|
.stat-opt input.s-amber {
|
|
accent-color: #854F0B;
|
|
}
|
|
|
|
.stat-opt input.s-red {
|
|
accent-color: #A32D2D;
|
|
}
|
|
|
|
.stat-opt span {
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.sep {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border-secondary);
|
|
margin: 2.5rem 0 1.5rem 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.synthese-block {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.synthese-block:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.sb-head {
|
|
background: var(--primary-light);
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
padding: 14px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sb-head i {
|
|
color: var(--primary);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.sb-lbl {
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.sb-body {
|
|
padding: 20px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.sbc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sbc-lbl {
|
|
font-size: 0.7rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.phase2-block {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.phase2-block:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.p2-head {
|
|
background: var(--primary-light);
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
padding: 14px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.p2-head i {
|
|
color: var(--primary);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.p2-lbl {
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.p2-body {
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.p2-row {
|
|
display: grid;
|
|
grid-template-columns: 180px 1fr;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.p2-key {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.ref-block {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.ref-block:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.rb-head {
|
|
background: var(--primary-light);
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
padding: 14px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.rb-head i {
|
|
color: var(--primary);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.rb-lbl {
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.rb-body {
|
|
padding: 20px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.rbc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.rbc-lbl {
|
|
font-size: 0.7rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.conf-box {
|
|
background: var(--color-a-bg);
|
|
border: 1px solid var(--color-a-border);
|
|
border-left: 4px solid var(--color-a-accent);
|
|
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
|
|
padding: 14px 20px;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.conf-box i {
|
|
color: var(--color-a-accent);
|
|
font-size: 1.3rem;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.conf-box p {
|
|
font-size: 0.9rem;
|
|
color: var(--color-a-dark);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.foot-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1px solid var(--color-border-secondary);
|
|
padding-top: 1.5rem;
|
|
margin-top: 3rem;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.foot-note {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-secondary);
|
|
font-style: italic;
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
max-width: 60%;
|
|
}
|
|
|
|
.foot-btns {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.fbtn {
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
border-radius: 10px;
|
|
padding: 10px 18px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.fbtn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.fbtn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.fb-p {
|
|
background: var(--primary);
|
|
border: 1px solid var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.fb-p:hover {
|
|
background: var(--primary-dark);
|
|
border-color: var(--primary-dark);
|
|
box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
|
|
}
|
|
|
|
.fb-r {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.fb-r:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.fb-r.clear-signature:hover {
|
|
background: #fee2e2;
|
|
color: #ef4444;
|
|
border-color: #fca5a5;
|
|
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 0.85rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
margin: 2.5rem 0 1.5rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.section-title i {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--color-border-secondary);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Signature Section Styles */
|
|
.signature-block {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 24px;
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: 2rem;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.signature-block:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.signature-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.signature-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.signature-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.signature-pad-wrapper {
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
background: var(--bg-primary);
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.signature-pad-wrapper:focus-within {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12);
|
|
}
|
|
|
|
.signature-pad {
|
|
width: 100%;
|
|
height: 180px;
|
|
background: #ffffff;
|
|
border-radius: var(--border-radius-sm);
|
|
border: 1px dashed var(--color-border-secondary);
|
|
cursor: crosshair;
|
|
touch-action: none;
|
|
}
|
|
|
|
.signature-pad-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.date-col {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.signature-info-box {
|
|
background: var(--primary-light);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.signature-info-box i {
|
|
color: var(--primary);
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.signature-info-box p {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Responsive CSS Overrides */
|
|
@media (max-width: 860px) {
|
|
.w {
|
|
padding: 1.5rem 16px;
|
|
}
|
|
|
|
.dh {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.id-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.cb-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.sb-body {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.p2-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 6px;
|
|
}
|
|
|
|
.p2-key {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.rb-body {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.signature-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.date-col {
|
|
gap: 16px;
|
|
}
|
|
|
|
.foot-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.foot-note {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.foot-btns {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
gap: 8px;
|
|
}
|
|
|
|
.foot-btns button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Print Styles Overrides */
|
|
@media print {
|
|
body {
|
|
background: white !important;
|
|
color: black !important;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.fbtn, .fb-p, .fb-r, .signature-pad-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
.radar-wrap, .cb, .synthese-block, .phase2-block, .ref-block, .signature-block {
|
|
page-break-inside: avoid;
|
|
border: 1px solid #94a3b8 !important;
|
|
background: white !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.ta, .ifi {
|
|
background: white !important;
|
|
border: 1px solid #94a3b8 !important;
|
|
resize: none;
|
|
}
|
|
|
|
.idf, .signature-info-box {
|
|
border: 1px solid #94a3b8 !important;
|
|
background: white !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.signature-pad {
|
|
border: 1px solid #94a3b8 !important;
|
|
background: white !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="w">
|
|
<h2 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Bilan individuel de
|
|
compétences
|
|
C1 à C6 pour le Mercredi 4 - radar interactif autoévaluation versus formateur référent, 6 blocs de
|
|
compétences avec statut acquis en cours à renforcer, synthèse et plan d'action Phase 2</h2>
|
|
|
|
<div class="dh">
|
|
<div>
|
|
<div class="dk">Mercredi 4 · Bilan individuel · Document confidentiel</div>
|
|
<div class="dt">Bilan de compétences<br>C1 à C6 - fin de parcours</div>
|
|
</div>
|
|
<div class="hbadge">
|
|
<div class="hbt">Confidentiel</div>
|
|
<div class="hbv">Dyade formateur référent</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="id-row">
|
|
<div class="idf"><span class="ifl">Prénom & nom</span><input class="ifi" type="text" placeholder="Votre nom"
|
|
aria-label="Prénom et nom" /></div>
|
|
<div class="idf"><span class="ifl">Date du bilan</span><input class="ifi" type="text"
|
|
placeholder="Mercredi __/__/____" aria-label="Date" /></div>
|
|
<div class="idf"><span class="ifl">Formateur référent</span><input class="ifi" type="text"
|
|
placeholder="Sébastien Veitl" aria-label="Formateur référent" /></div>
|
|
</div>
|
|
|
|
<div class="notice">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<p>Ce document est <strong>confidentiel</strong> - il n'est pas partagé en plénière. Il sert de base à l'échange
|
|
en
|
|
dyade avec le formateur référent. Complétez d'abord la colonne "auto" pour chaque compétence, puis le formateur
|
|
référent complète sa colonne lors de l'échange.</p>
|
|
</div>
|
|
|
|
<div class="radar-wrap">
|
|
<div class="radar-head">
|
|
<span class="radar-lbl">Radar de compétences - vue synthétique</span>
|
|
<span style="font-size:11px;color:var(--color-text-tertiary);">Se met à jour automatiquement</span>
|
|
</div>
|
|
<div class="radar-body">
|
|
<canvas id="radarCanvas" width="340" height="280" aria-label="Radar de compétences C1 à C6"></canvas>
|
|
</div>
|
|
<div class="radar-legend">
|
|
<div class="rl-item">
|
|
<div class="rl-dot dot-self"></div>Autoévaluation
|
|
</div>
|
|
<div class="rl-item">
|
|
<div class="rl-dot dot-ref"></div>Formateur référent
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comp-blocks" id="comp-blocks">
|
|
|
|
<div class="cb" data-comp="0">
|
|
<div class="cb-head">
|
|
<div class="cb-badge bb1"><i class="ti ti-tool" aria-hidden="true"></i></div>
|
|
<div class="cb-meta">
|
|
<div class="cb-num">C1 · UF1</div>
|
|
<div class="cb-title">Utiliser les outils IA générative</div>
|
|
<div class="cb-sub">Sélectionner, comparer et justifier les outils selon le contexte professionnel</div>
|
|
</div>
|
|
<div class="cb-scores">
|
|
<div class="score-col">
|
|
<span class="sc-lbl">Auto</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C1 autoévaluation">
|
|
<label class="sc-opt"><input type="radio" name="s1a" value="1"
|
|
onchange="updateRadar()" /><span>1</span></label>
|
|
<label class="sc-opt"><input type="radio" name="s1a" value="2"
|
|
onchange="updateRadar()" /><span>2</span></label>
|
|
<label class="sc-opt"><input type="radio" name="s1a" value="3"
|
|
onchange="updateRadar()" /><span>3</span></label>
|
|
<label class="sc-opt"><input type="radio" name="s1a" value="4"
|
|
onchange="updateRadar()" /><span>4</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="score-col">
|
|
<span class="sc-lbl">Réf.</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C1 référent">
|
|
<label class="sc-opt sc-opt-a"><input type="radio" name="s1r" value="1"
|
|
onchange="updateRadar()" /><span>1</span></label>
|
|
<label class="sc-opt sc-opt-a"><input type="radio" name="s1r" value="2"
|
|
onchange="updateRadar()" /><span>2</span></label>
|
|
<label class="sc-opt sc-opt-a"><input type="radio" name="s1r" value="3"
|
|
onchange="updateRadar()" /><span>3</span></label>
|
|
<label class="sc-opt sc-opt-a"><input type="radio" name="s1r" value="4"
|
|
onchange="updateRadar()" /><span>4</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cb-body">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">
|
|
<span class="cf-lbl">Statut</span>
|
|
<div class="statut-row">
|
|
<label class="stat-opt"><input type="radio" name="st1" class="s-green"><span>Acquise</span></label>
|
|
<label class="stat-opt"><input type="radio" name="st1" class="s-amber"><span>En cours</span></label>
|
|
<label class="stat-opt"><input type="radio" name="st1" class="s-red"><span>À renforcer</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="cb-row">
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Ce que je sais faire - exemple concret issu de mes passages</div><textarea class="ta"
|
|
rows="2"
|
|
placeholder="Ex. : Je peux comparer ChatGPT, Mistral et Copilot pour un profil RH et justifier mon choix selon le RGPD…"
|
|
aria-label="C1 exemple concret"></textarea>
|
|
</div>
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Ce qui me manque encore - formulé comme un objectif Phase 2</div><textarea class="ta"
|
|
rows="2"
|
|
placeholder="Ex. : Je dois approfondir les cas d'usage sectoriels pour des publics hors tertiaire…"
|
|
aria-label="C1 objectif Phase 2"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cb" data-comp="1">
|
|
<div class="cb-head">
|
|
<div class="cb-badge bb2"><i class="ti ti-prompt" aria-hidden="true"></i></div>
|
|
<div class="cb-meta">
|
|
<div class="cb-num">C2 · UF2</div>
|
|
<div class="cb-title">Rédiger des prompts efficaces</div>
|
|
<div class="cb-sub">Structurer un prompt selon ROCCO, itérer, adapter selon l'outil</div>
|
|
</div>
|
|
<div class="cb-scores">
|
|
<div class="score-col"><span class="sc-lbl">Auto</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C2 auto"><label class="sc-opt"><input type="radio"
|
|
name="s2a" value="1" onchange="updateRadar()" /><span>1</span></label><label class="sc-opt"><input
|
|
type="radio" name="s2a" value="2" onchange="updateRadar()" /><span>2</span></label><label
|
|
class="sc-opt"><input type="radio" name="s2a" value="3"
|
|
onchange="updateRadar()" /><span>3</span></label><label class="sc-opt"><input type="radio"
|
|
name="s2a" value="4" onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
<div class="score-col"><span class="sc-lbl">Réf.</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C2 ref"><label class="sc-opt sc-opt-a"><input
|
|
type="radio" name="s2r" value="1" onchange="updateRadar()" /><span>1</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s2r" value="2"
|
|
onchange="updateRadar()" /><span>2</span></label><label class="sc-opt sc-opt-a"><input type="radio"
|
|
name="s2r" value="3" onchange="updateRadar()" /><span>3</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s2r" value="4"
|
|
onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cb-body">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;"><span class="cf-lbl">Statut</span>
|
|
<div class="statut-row"><label class="stat-opt"><input type="radio" name="st2"
|
|
class="s-green"><span>Acquise</span></label><label class="stat-opt"><input type="radio" name="st2"
|
|
class="s-amber"><span>En cours</span></label><label class="stat-opt"><input type="radio" name="st2"
|
|
class="s-red"><span>À renforcer</span></label></div>
|
|
</div>
|
|
<div class="cb-row">
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Ce que je sais faire</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Je construis un prompt ROCCO complet en direct et je montre l'itération à voix haute…"
|
|
aria-label="C2 acquis"></textarea>
|
|
</div>
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Objectif Phase 2</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Préparer 3 cas métiers variés pour l'atelier études de cas UF2…"
|
|
aria-label="C2 objectif"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cb" data-comp="2">
|
|
<div class="cb-head">
|
|
<div class="cb-badge bb3"><i class="ti ti-shield" aria-hidden="true"></i></div>
|
|
<div class="cb-meta">
|
|
<div class="cb-num">C3 · UF3</div>
|
|
<div class="cb-title">Sécuriser l'usage de l'IA</div>
|
|
<div class="cb-sub">RGPD, IA Act, shadow AI - identifier les risques et adopter les bons réflexes</div>
|
|
</div>
|
|
<div class="cb-scores">
|
|
<div class="score-col"><span class="sc-lbl">Auto</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C3 auto"><label class="sc-opt"><input type="radio"
|
|
name="s3a" value="1" onchange="updateRadar()" /><span>1</span></label><label class="sc-opt"><input
|
|
type="radio" name="s3a" value="2" onchange="updateRadar()" /><span>2</span></label><label
|
|
class="sc-opt"><input type="radio" name="s3a" value="3"
|
|
onchange="updateRadar()" /><span>3</span></label><label class="sc-opt"><input type="radio"
|
|
name="s3a" value="4" onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
<div class="score-col"><span class="sc-lbl">Réf.</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C3 ref"><label class="sc-opt sc-opt-a"><input
|
|
type="radio" name="s3r" value="1" onchange="updateRadar()" /><span>1</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s3r" value="2"
|
|
onchange="updateRadar()" /><span>2</span></label><label class="sc-opt sc-opt-a"><input type="radio"
|
|
name="s3r" value="3" onchange="updateRadar()" /><span>3</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s3r" value="4"
|
|
onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cb-body">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;"><span class="cf-lbl">Statut</span>
|
|
<div class="statut-row"><label class="stat-opt"><input type="radio" name="st3"
|
|
class="s-green"><span>Acquise</span></label><label class="stat-opt"><input type="radio" name="st3"
|
|
class="s-amber"><span>En cours</span></label><label class="stat-opt"><input type="radio" name="st3"
|
|
class="s-red"><span>À renforcer</span></label></div>
|
|
</div>
|
|
<div class="cb-row">
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Ce que je sais faire</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Je sais reformuler les principes RGPD sans jargon juridique et renvoyer vers le DPO au bon moment…"
|
|
aria-label="C3 acquis"></textarea>
|
|
</div>
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Objectif Phase 2</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Préparer 2 exemples réels de shadow AI pour ancrer le débat dans des situations concrètes…"
|
|
aria-label="C3 objectif"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cb" data-comp="3">
|
|
<div class="cb-head">
|
|
<div class="cb-badge bb4"><i class="ti ti-accessible" aria-hidden="true"></i></div>
|
|
<div class="cb-meta">
|
|
<div class="cb-num">C4 · UF4</div>
|
|
<div class="cb-title">Concevoir des contenus inclusifs</div>
|
|
<div class="cb-sub">WCAG, FALC, spécificités déficiences visuelles et auditives</div>
|
|
</div>
|
|
<div class="cb-scores">
|
|
<div class="score-col"><span class="sc-lbl">Auto</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C4 auto"><label class="sc-opt"><input type="radio"
|
|
name="s4a" value="1" onchange="updateRadar()" /><span>1</span></label><label class="sc-opt"><input
|
|
type="radio" name="s4a" value="2" onchange="updateRadar()" /><span>2</span></label><label
|
|
class="sc-opt"><input type="radio" name="s4a" value="3"
|
|
onchange="updateRadar()" /><span>3</span></label><label class="sc-opt"><input type="radio"
|
|
name="s4a" value="4" onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
<div class="score-col"><span class="sc-lbl">Réf.</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C4 ref"><label class="sc-opt sc-opt-a"><input
|
|
type="radio" name="s4r" value="1" onchange="updateRadar()" /><span>1</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s4r" value="2"
|
|
onchange="updateRadar()" /><span>2</span></label><label class="sc-opt sc-opt-a"><input type="radio"
|
|
name="s4r" value="3" onchange="updateRadar()" /><span>3</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s4r" value="4"
|
|
onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cb-body">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;"><span class="cf-lbl">Statut</span>
|
|
<div class="statut-row"><label class="stat-opt"><input type="radio" name="st4"
|
|
class="s-green"><span>Acquise</span></label><label class="stat-opt"><input type="radio" name="st4"
|
|
class="s-amber"><span>En cours</span></label><label class="stat-opt"><input type="radio" name="st4"
|
|
class="s-red"><span>À renforcer</span></label></div>
|
|
</div>
|
|
<div class="cb-row">
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Ce que je sais faire</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Je sais animer le brainstorming accessibilité et démontrer la réécriture FALC en direct…"
|
|
aria-label="C4 acquis"></textarea>
|
|
</div>
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Objectif Phase 2</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Approfondir les spécificités auditives - je manque d'exemples concrets sur le sous-titrage IA…"
|
|
aria-label="C4 objectif"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cb" data-comp="4">
|
|
<div class="cb-head">
|
|
<div class="cb-badge bb5"><i class="ti ti-sparkles" aria-hidden="true"></i></div>
|
|
<div class="cb-meta">
|
|
<div class="cb-num">C5 · UF2 & UF4</div>
|
|
<div class="cb-title">Optimiser les contenus générés par IA</div>
|
|
<div class="cb-sub">Réviser, améliorer et valider un contenu IA selon des critères définis</div>
|
|
</div>
|
|
<div class="cb-scores">
|
|
<div class="score-col"><span class="sc-lbl">Auto</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C5 auto"><label class="sc-opt"><input type="radio"
|
|
name="s5a" value="1" onchange="updateRadar()" /><span>1</span></label><label class="sc-opt"><input
|
|
type="radio" name="s5a" value="2" onchange="updateRadar()" /><span>2</span></label><label
|
|
class="sc-opt"><input type="radio" name="s5a" value="3"
|
|
onchange="updateRadar()" /><span>3</span></label><label class="sc-opt"><input type="radio"
|
|
name="s5a" value="4" onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
<div class="score-col"><span class="sc-lbl">Réf.</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C5 ref"><label class="sc-opt sc-opt-a"><input
|
|
type="radio" name="s5r" value="1" onchange="updateRadar()" /><span>1</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s5r" value="2"
|
|
onchange="updateRadar()" /><span>2</span></label><label class="sc-opt sc-opt-a"><input type="radio"
|
|
name="s5r" value="3" onchange="updateRadar()" /><span>3</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s5r" value="4"
|
|
onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cb-body">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;"><span class="cf-lbl">Statut</span>
|
|
<div class="statut-row"><label class="stat-opt"><input type="radio" name="st5"
|
|
class="s-green"><span>Acquise</span></label><label class="stat-opt"><input type="radio" name="st5"
|
|
class="s-amber"><span>En cours</span></label><label class="stat-opt"><input type="radio" name="st5"
|
|
class="s-red"><span>À renforcer</span></label></div>
|
|
</div>
|
|
<div class="cb-row">
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Ce que je sais faire</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Je sais guider un apprenant dans la révision d'un texte généré - identifier les erreurs et itérer…"
|
|
aria-label="C5 acquis"></textarea>
|
|
</div>
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Objectif Phase 2</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Développer une grille de relecture type à donner aux apprenants pour évaluer leurs propres productions…"
|
|
aria-label="C5 objectif"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cb" data-comp="5">
|
|
<div class="cb-head">
|
|
<div class="cb-badge bb6"><i class="ti ti-scale" aria-hidden="true"></i></div>
|
|
<div class="cb-meta">
|
|
<div class="cb-num">C6 · UF5</div>
|
|
<div class="cb-title">Adopter une posture éthique face à l'IA</div>
|
|
<div class="cb-sub">Biais, sobriété, responsabilité - analyser les impacts et faciliter le débat</div>
|
|
</div>
|
|
<div class="cb-scores">
|
|
<div class="score-col"><span class="sc-lbl">Auto</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C6 auto"><label class="sc-opt"><input type="radio"
|
|
name="s6a" value="1" onchange="updateRadar()" /><span>1</span></label><label class="sc-opt"><input
|
|
type="radio" name="s6a" value="2" onchange="updateRadar()" /><span>2</span></label><label
|
|
class="sc-opt"><input type="radio" name="s6a" value="3"
|
|
onchange="updateRadar()" /><span>3</span></label><label class="sc-opt"><input type="radio"
|
|
name="s6a" value="4" onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
<div class="score-col"><span class="sc-lbl">Réf.</span>
|
|
<div class="sc-opts" role="radiogroup" aria-label="C6 ref"><label class="sc-opt sc-opt-a"><input
|
|
type="radio" name="s6r" value="1" onchange="updateRadar()" /><span>1</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s6r" value="2"
|
|
onchange="updateRadar()" /><span>2</span></label><label class="sc-opt sc-opt-a"><input type="radio"
|
|
name="s6r" value="3" onchange="updateRadar()" /><span>3</span></label><label
|
|
class="sc-opt sc-opt-a"><input type="radio" name="s6r" value="4"
|
|
onchange="updateRadar()" /><span>4</span></label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cb-body">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;"><span class="cf-lbl">Statut</span>
|
|
<div class="statut-row"><label class="stat-opt"><input type="radio" name="st6"
|
|
class="s-green"><span>Acquise</span></label><label class="stat-opt"><input type="radio" name="st6"
|
|
class="s-amber"><span>En cours</span></label><label class="stat-opt"><input type="radio" name="st6"
|
|
class="s-red"><span>À renforcer</span></label></div>
|
|
</div>
|
|
<div class="cb-row">
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Ce que je sais faire</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Je sais animer un débat sur les biais sans prendre parti et ramener au cap pédagogique…"
|
|
aria-label="C6 acquis"></textarea>
|
|
</div>
|
|
<div class="cb-field">
|
|
<div class="cf-lbl">Objectif Phase 2</div><textarea class="ta" rows="2"
|
|
placeholder="Ex. : Travailler ma posture sur la sobriété numérique - je moralise encore trop…"
|
|
aria-label="C6 objectif"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<div class="synthese-block">
|
|
<div class="sb-head"><i class="ti ti-chart-radar" style="font-size:15px;color:#3B6D11;"
|
|
aria-hidden="true"></i><span class="sb-lbl">Synthèse du bilan</span></div>
|
|
<div class="sb-body">
|
|
<div class="sbc">
|
|
<div class="sbc-lbl">Ma compétence la plus solide</div><textarea class="ta" rows="3"
|
|
placeholder="La compétence sur laquelle je peux m'appuyer en Phase 2 - avec un exemple précis issu de mes passages…"
|
|
aria-label="Compétence la plus solide"></textarea>
|
|
</div>
|
|
<div class="sbc">
|
|
<div class="sbc-lbl">Ma priorité de travail Phase 2</div><textarea class="ta" rows="3"
|
|
placeholder="La compétence à renforcer en priorité - formulée comme un objectif concret, pas un manque…"
|
|
aria-label="Priorité Phase 2"></textarea>
|
|
</div>
|
|
<div class="sbc">
|
|
<div class="sbc-lbl">Ce qui me surprend dans les écarts autoéval / retours</div><textarea class="ta" rows="3"
|
|
placeholder="Un écart entre ce que je percevais et ce que le formateur référent a observé…"
|
|
aria-label="Écarts autoéval"></textarea>
|
|
</div>
|
|
<div class="sbc">
|
|
<div class="sbc-lbl">Mon engagement Phase 2 - 1 chose concrète</div><textarea class="ta" rows="3"
|
|
placeholder="Une chose précise que je mets en place dès la première co-animation. Pas une intention - un acte."
|
|
aria-label="Engagement Phase 2"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="phase2-block">
|
|
<div class="p2-head"><i class="ti ti-map-2" style="font-size:15px;color:#0C447C;" aria-hidden="true"></i><span
|
|
class="p2-lbl">Plan d'action Phase 2</span></div>
|
|
<div class="p2-body">
|
|
<div class="p2-row"><span class="p2-key">Séquences attribuées</span><textarea class="ta" rows="2"
|
|
placeholder="Séquences confiées par le formateur référent pour les premières co-animations - notez l'UF, le chapitre et la durée…"
|
|
aria-label="Séquences attribuées"></textarea></div>
|
|
<div class="p2-row"><span class="p2-key">Première session terrain</span><textarea class="ta" rows="2"
|
|
placeholder="Date, lieu, groupe d'apprenants, contexte - ce que vous savez déjà de la première session réelle…"
|
|
aria-label="Première session terrain"></textarea></div>
|
|
<div class="p2-row"><span class="p2-key">Point de vigilance personnel</span><textarea class="ta" rows="2"
|
|
placeholder="Ce sur quoi vous vous surveiller particulièrement pendant la Phase 2 - issu du bilan…"
|
|
aria-label="Point de vigilance"></textarea></div>
|
|
<div class="p2-row"><span class="p2-key">Prochain contact formateur référent</span><textarea class="ta" rows="2"
|
|
placeholder="Date du retour post-première co-animation, format (visio / asynchrone), questions à préparer…"
|
|
aria-label="Prochain contact"></textarea></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ref-block">
|
|
<div class="rb-head"><i class="ti ti-user-check" style="font-size:15px;color:#633806;"
|
|
aria-hidden="true"></i><span class="rb-lbl">Notes formateur référent - usage interne uniquement</span></div>
|
|
<div class="rb-body">
|
|
<div class="rbc">
|
|
<div class="rbc-lbl">Observation principale sur le parcours</div><textarea class="ta" rows="3"
|
|
placeholder="Ce que j'ai observé de la progression globale de ce formateur depuis le Mercredi 1…"
|
|
aria-label="Observation formateur référent"></textarea>
|
|
</div>
|
|
<div class="rbc">
|
|
<div class="rbc-lbl">Recommandation Phase 2</div><textarea class="ta" rows="3"
|
|
placeholder="Séquences à confier en priorité, points de vigilance à surveiller, fréquence des retours…"
|
|
aria-label="Recommandation Phase 2"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PART 4 -->
|
|
<div class="section-title">
|
|
<i class="ti ti-edit" aria-hidden="true"></i>Partie 4 - Validation & Signature
|
|
</div>
|
|
|
|
<!-- Signature Block -->
|
|
<div class="signature-block">
|
|
<div class="signature-grid">
|
|
<div class="signature-col">
|
|
<div class="signature-label">Signature</div>
|
|
<div class="signature-pad-wrapper">
|
|
<canvas class="signature-pad" id="signature-pad"></canvas>
|
|
<div class="signature-pad-controls">
|
|
<button type="button" class="fbtn fb-r clear-signature" onclick="clearSignature()">
|
|
<i class="ti ti-trash" aria-hidden="true"></i> Effacer
|
|
</button>
|
|
<button type="button" class="fbtn fb-p" onclick="saveSignature()">
|
|
<i class="ti ti-circle-check" aria-hidden="true"></i> Enregistrer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="signature-col date-col">
|
|
<div class="idf">
|
|
<span class="ifl">Date de signature</span>
|
|
<input type="text" class="ifi" placeholder="__/__/____" id="signature-date" />
|
|
</div>
|
|
<div class="signature-info-box">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<p>Cette signature atteste que vous avez complété cette fiche et préparé votre mise en situation pour le Mercredi 4.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="conf-box">
|
|
<i class="ti ti-lock" aria-hidden="true"></i>
|
|
<p>Ce document reste entre le formateur en formation et le formateur référent. Il ne circule pas en plénière et ne fait pas l'objet d'une restitution collective.</p>
|
|
</div>
|
|
|
|
<div class="foot-row">
|
|
<div class="foot-note">Document à conserver dans le dossier formateur individuel. Servira de référence pour le suivi en Phase 2 et la préparation à la certification (Mercredi 5).</div>
|
|
<div class="foot-btns">
|
|
<button class="fbtn fb-r" onclick="clearAll()"><i class="ti ti-eraser" aria-hidden="true"></i>Effacer toutes les saisies</button>
|
|
<button class="fbtn fb-p" onclick="window.print()"><i class="ti ti-printer" aria-hidden="true"></i>Imprimer</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
|
|
<script>
|
|
let radarChart = null;
|
|
function getVal(name) { const el = document.querySelector('input[name=' + name + ']:checked'); return el ? parseInt(el.value) : 0; }
|
|
|
|
function updateRadar() {
|
|
const auto = [getVal('s1a'), getVal('s2a'), getVal('s3a'), getVal('s4a'), getVal('s5a'), getVal('s6a')];
|
|
const ref = [getVal('s1r'), getVal('s2r'), getVal('s3r'), getVal('s4r'), getVal('s5r'), getVal('s6r')];
|
|
if (radarChart) {
|
|
radarChart.data.datasets[0].data = auto;
|
|
radarChart.data.datasets[1].data = ref;
|
|
radarChart.update();
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const canvas = document.getElementById('signature-pad');
|
|
const ctx = canvas.getContext('2d');
|
|
let isDrawing = false;
|
|
let lastX = 0;
|
|
let lastY = 0;
|
|
let ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
|
|
// Fonction optimisée pour le redimensionnement du canvas
|
|
function resizeCanvas() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.width = rect.width * ratio;
|
|
canvas.height = rect.height * ratio;
|
|
canvas.style.width = rect.width + 'px';
|
|
canvas.style.height = rect.height + 'px';
|
|
ctx.scale(ratio, ratio);
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#0f172a';
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
// Initialisation du canvas
|
|
function initCanvas() {
|
|
// Utilisation de ResizeObserver pour une meilleure gestion du redimensionnement
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
resizeCanvas();
|
|
// Recharger la signature après redimensionnement
|
|
const savedSignature = localStorage.getItem('signatureData_bilan_m4');
|
|
if (savedSignature) {
|
|
const img = new Image();
|
|
img.onload = function() {
|
|
ctx.drawImage(img, 0, 0, canvas.width / ratio, canvas.height / ratio);
|
|
};
|
|
img.src = savedSignature;
|
|
}
|
|
});
|
|
|
|
resizeObserver.observe(canvas);
|
|
resizeCanvas();
|
|
}
|
|
|
|
// Fonctions de dessin optimisées
|
|
function startDrawing(e) {
|
|
isDrawing = true;
|
|
const rect = canvas.getBoundingClientRect();
|
|
lastX = (e.clientX || e.touches[0].clientX) - rect.left;
|
|
lastY = (e.clientY || e.touches[0].clientY) - rect.top;
|
|
}
|
|
|
|
function draw(e) {
|
|
if (!isDrawing) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const currentX = (e.clientX || e.touches[0].clientX) - rect.left;
|
|
const currentY = (e.clientY || e.touches[0].clientY) - rect.top;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(lastX, lastY);
|
|
ctx.lineTo(currentX, currentY);
|
|
ctx.stroke();
|
|
[lastX, lastY] = [currentX, currentY];
|
|
}
|
|
|
|
// Gestion des événements avec dessin
|
|
canvas.addEventListener('mousedown', startDrawing);
|
|
canvas.addEventListener('mousemove', draw);
|
|
canvas.addEventListener('mouseup', () => { isDrawing = false; });
|
|
canvas.addEventListener('mouseout', () => { isDrawing = false; });
|
|
|
|
canvas.addEventListener('touchstart', function(e) {
|
|
e.preventDefault();
|
|
startDrawing(e);
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchmove', function(e) {
|
|
e.preventDefault();
|
|
draw(e);
|
|
}, { passive: false });
|
|
|
|
canvas.addEventListener('touchend', () => { isDrawing = false; });
|
|
|
|
// Fonctions de gestion de la signature
|
|
window.clearSignature = function() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
localStorage.removeItem('signatureData_bilan_m4');
|
|
};
|
|
|
|
window.saveSignature = function() {
|
|
const signatureData = canvas.toDataURL('image/png');
|
|
localStorage.setItem('signatureData_bilan_m4', signatureData);
|
|
alert('Signature enregistrée !');
|
|
return signatureData;
|
|
};
|
|
|
|
// Chargement de la signature sauvegardée
|
|
const savedSignature = localStorage.getItem('signatureData_bilan_m4');
|
|
if (savedSignature) {
|
|
const img = new Image();
|
|
img.onload = function() {
|
|
ctx.drawImage(img, 0, 0, canvas.width / ratio, canvas.height / ratio);
|
|
};
|
|
img.src = savedSignature;
|
|
}
|
|
|
|
// Gestion de la date de signature
|
|
const signatureDate = document.getElementById('signature-date');
|
|
const savedDate = localStorage.getItem('signatureDate_bilan_m4');
|
|
if (savedDate) signatureDate.value = savedDate;
|
|
|
|
signatureDate.addEventListener('input', () => {
|
|
localStorage.setItem('signatureDate_bilan_m4', signatureDate.value);
|
|
});
|
|
|
|
// Initialisation finale
|
|
initCanvas();
|
|
});
|
|
|
|
// Auto-save & Load for Textareas
|
|
const textareas = document.querySelectorAll('textarea');
|
|
textareas.forEach((t, index) => {
|
|
const savedVal = localStorage.getItem(`textarea_bilan_m4_${index}`);
|
|
if (savedVal) t.value = savedVal;
|
|
|
|
t.addEventListener('input', () => {
|
|
localStorage.setItem(`textarea_bilan_m4_${index}`, t.value);
|
|
});
|
|
});
|
|
|
|
// Auto-save & Load for Text Inputs
|
|
const textInputs = document.querySelectorAll('input[type="text"]');
|
|
textInputs.forEach((input, index) => {
|
|
// Exclude signature date to avoid double saving/loading clash
|
|
if (input.id === 'signature-date') return;
|
|
|
|
const savedVal = localStorage.getItem(`input_bilan_m4_${index}`);
|
|
if (savedVal) input.value = savedVal;
|
|
|
|
input.addEventListener('input', () => {
|
|
localStorage.setItem(`input_bilan_m4_${index}`, input.value);
|
|
});
|
|
});
|
|
|
|
// Auto-save & Load for Radio Inputs
|
|
const radios = document.querySelectorAll('input[type="radio"]');
|
|
radios.forEach((radio) => {
|
|
const name = radio.name;
|
|
const savedVal = localStorage.getItem(`radio_bilan_m4_${name}`);
|
|
if (savedVal && radio.value === savedVal) {
|
|
radio.checked = true;
|
|
}
|
|
|
|
radio.addEventListener('change', () => {
|
|
localStorage.setItem(`radio_bilan_m4_${name}`, radio.value);
|
|
});
|
|
});
|
|
|
|
window.addEventListener('load', () => {
|
|
const ctx = document.getElementById('radarCanvas').getContext('2d');
|
|
radarChart = new Chart(ctx, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: ['C1 Outils', 'C2 Prompt', 'C3 Sécurité', 'C4 Accessibilité', 'C5 Optimisation', 'C6 Éthique'],
|
|
datasets: [
|
|
{ label: 'Autoévaluation', data: [0, 0, 0, 0, 0, 0], borderColor: '#534AB7', backgroundColor: 'rgba(83,74,183,0.1)', borderWidth: 2, pointBackgroundColor: '#534AB7', pointRadius: 4 },
|
|
{ label: 'Référent', data: [0, 0, 0, 0, 0, 0], borderColor: '#854F0B', backgroundColor: 'rgba(133,79,11,0.08)', borderWidth: 2, pointBackgroundColor: '#854F0B', pointRadius: 4 }
|
|
]
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
scales: { r: { min: 0, max: 4, ticks: { stepSize: 1, font: { size: 10 } }, pointLabels: { font: { size: 11 } }, grid: { color: 'rgba(0,0,0,0.08)' }, angleLines: { color: 'rgba(0,0,0,0.08)' } } },
|
|
plugins: { legend: { display: false } },
|
|
animation: { duration: 200 }
|
|
}
|
|
});
|
|
// Call updateRadar after chart creation to apply restored values!
|
|
updateRadar();
|
|
});
|
|
|
|
// Clear All Function
|
|
window.clearAll = function() {
|
|
if (!confirm('Effacer toutes les saisies de cette fiche ?')) return;
|
|
document.querySelectorAll('textarea').forEach(t => t.value = '');
|
|
document.querySelectorAll('.ifi').forEach(i => i.value = '');
|
|
document.querySelectorAll('input[type=radio]').forEach(r => r.checked = false);
|
|
if (typeof clearSignature === 'function') {
|
|
clearSignature();
|
|
}
|
|
|
|
// Clean signature date field
|
|
const sigDateEl = document.getElementById('signature-date');
|
|
if (sigDateEl) sigDateEl.value = '';
|
|
|
|
// Update Radar
|
|
if (radarChart) {
|
|
radarChart.data.datasets.forEach(d => d.data = [0, 0, 0, 0, 0, 0]);
|
|
radarChart.update();
|
|
}
|
|
|
|
// Remove from localStorage
|
|
const keysToRemove = [];
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
const key = localStorage.key(i);
|
|
if (key && (key.startsWith('textarea_bilan_m4_') || key.startsWith('input_bilan_m4_') || key.startsWith('radio_bilan_m4_') || key === 'signatureData_bilan_m4' || key === 'signatureDate_bilan_m4')) {
|
|
keysToRemove.push(key);
|
|
}
|
|
}
|
|
keysToRemove.forEach(k => localStorage.removeItem(k));
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |