1468 lines
56 KiB
HTML
1468 lines
56 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Grille critères-IA - Certification</title>
|
|
|
|
<!-- 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;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.fiche {
|
|
max-width: 960px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 2.5rem 24px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Header */
|
|
.fiche-header {
|
|
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;
|
|
}
|
|
|
|
.fiche-kicker {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .2em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.fiche-title {
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
color: var(--color-text-primary);
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.fiche-badge {
|
|
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);
|
|
}
|
|
|
|
.badge-top {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-dark);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.badge-bottom {
|
|
font-size: 1.15rem;
|
|
font-weight: 900;
|
|
color: var(--primary-dark);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Section Headers */
|
|
.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;
|
|
}
|
|
|
|
/* Synth Table */
|
|
.synth-table {
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
overflow: hidden;
|
|
width: 100%;
|
|
background: var(--bg-secondary);
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.st-head {
|
|
display: grid;
|
|
grid-template-columns: 60px 1.8fr 1.8fr 2fr;
|
|
background: var(--primary-light);
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
}
|
|
|
|
.st-hc {
|
|
padding: 12px;
|
|
font-size: 0.7rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--primary-dark);
|
|
border-right: 1px solid var(--color-border-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.st-hc:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.st-row {
|
|
display: grid;
|
|
grid-template-columns: 60px 1.8fr 1.8fr 2fr;
|
|
border-top: 1px solid var(--color-border-secondary);
|
|
align-items: stretch;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.st-row:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
.st-c {
|
|
padding: 14px 12px;
|
|
border-right: 1px solid var(--color-border-secondary);
|
|
font-size: 0.9rem;
|
|
color: var(--color-text-primary);
|
|
line-height: 1.5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.st-c:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.st-c.muted {
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.st-c-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.cb {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
letter-spacing: 0.05em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Colors */
|
|
.bg-p { background: #EEEDFE; color: #3C3489; border: 1px solid #AFA9EC; }
|
|
.bg-t { background: #E1F5EE; color: #085041; border: 1px solid #5DCAA5; }
|
|
.bg-r { background: #FCEBEB; color: #791F1F; border: 1px solid #F09595; }
|
|
.bg-b { background: #E6F1FB; color: #0C447C; border: 1px solid #85B7EB; }
|
|
.bg-g { background: #EAF3DE; color: #27500A; border: 1px solid #97C459; }
|
|
.bg-a { background: #FAEEDA; color: #633806; border: 1px solid #EF9F27; }
|
|
|
|
/* Detailed block collapsible cards */
|
|
.detail-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.comp-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: 0.5rem;
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.comp-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.cc-head {
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
background: var(--bg-secondary);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.cc-head:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.cc-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.cci-p { background: #EEEDFE; color: #3C3489; border: 1px solid #AFA9EC; }
|
|
.cci-t { background: #E1F5EE; color: #085041; border: 1px solid #5DCAA5; }
|
|
.cci-r { background: #FCEBEB; color: #791F1F; border: 1px solid #F09595; }
|
|
.cci-b { background: #E6F1FB; color: #0C447C; border: 1px solid #85B7EB; }
|
|
.cci-g { background: #EAF3DE; color: #27500A; border: 1px solid #97C459; }
|
|
.cci-a { background: #FAEEDA; color: #633806; border: 1px solid #EF9F27; }
|
|
|
|
.cc-meta {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.cc-num {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.cc-title {
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
color: var(--color-text-primary);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.cc-sub {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.cc-toggle {
|
|
font-size: 1.3rem;
|
|
color: var(--color-text-tertiary);
|
|
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.comp-card.open .cc-toggle {
|
|
transform: rotate(180deg);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.cc-body {
|
|
display: none;
|
|
padding: 0;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.comp-card.open .cc-body {
|
|
display: block;
|
|
}
|
|
|
|
.cr-block {
|
|
border-top: 1px solid var(--color-border-secondary);
|
|
padding: 20px;
|
|
}
|
|
|
|
.cr-block:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
.cr-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.cr-num-badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.cr-title {
|
|
font-size: 1rem;
|
|
font-weight: 800;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.cr-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.cr-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.cr-col-lbl {
|
|
font-size: 0.7rem;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.cr-col-text {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-primary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.piege-pill {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
background: var(--color-a-bg);
|
|
border: 1px solid var(--color-a-border);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 10px 14px;
|
|
font-size: 0.85rem;
|
|
color: var(--color-a-dark);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.piege-pill i {
|
|
color: var(--color-a-accent);
|
|
font-size: 1.1rem;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Print Button & Footer Strip */
|
|
.footer-strip {
|
|
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;
|
|
}
|
|
|
|
.footer-note {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-secondary);
|
|
font-style: italic;
|
|
line-height: 1.5;
|
|
flex: 1;
|
|
max-width: 60%;
|
|
}
|
|
|
|
.print-btn {
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
background: var(--primary);
|
|
border: 1px solid var(--primary);
|
|
color: white;
|
|
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);
|
|
}
|
|
|
|
.print-btn:hover {
|
|
background: var(--primary-dark);
|
|
border-color: var(--primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
|
|
}
|
|
|
|
.print-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Identity Input elements */
|
|
.id-field {
|
|
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;
|
|
}
|
|
|
|
.id-field:focus-within {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12), var(--shadow-md);
|
|
}
|
|
|
|
.field-label {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.field-line {
|
|
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;
|
|
}
|
|
|
|
.field-line::placeholder {
|
|
color: var(--color-text-tertiary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Accessibility Utilities */
|
|
.sr-only {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.signature-btn {
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: .03em;
|
|
text-transform: uppercase;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--color-border-secondary);
|
|
color: var(--color-text-secondary);
|
|
border-radius: 8px;
|
|
padding: 8px 14px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.signature-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--color-text-primary);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.signature-btn.clear:hover {
|
|
background: #fee2e2;
|
|
color: #ef4444;
|
|
border-color: #fca5a5;
|
|
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.signature-btn.save {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.signature-btn.save:hover {
|
|
background: var(--primary-dark);
|
|
border-color: var(--primary-dark);
|
|
box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
|
|
}
|
|
|
|
.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) {
|
|
.fiche {
|
|
padding: 1.5rem 16px;
|
|
}
|
|
|
|
.fiche-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.st-head, .st-row {
|
|
grid-template-columns: 1fr;
|
|
border-bottom: 2px solid var(--color-border-secondary);
|
|
}
|
|
|
|
.st-head {
|
|
display: none; /* Hide grid headers on mobile */
|
|
}
|
|
|
|
.st-c {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--color-border-secondary);
|
|
padding: 12px;
|
|
}
|
|
|
|
.st-c:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.st-c-center {
|
|
background: var(--primary-light);
|
|
padding: 8px 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.cr-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.signature-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.date-col {
|
|
gap: 16px;
|
|
}
|
|
|
|
.footer-strip {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.footer-note {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.print-btn {
|
|
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;
|
|
}
|
|
|
|
.print-btn, .signature-pad-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
.synth-table, .comp-card, .signature-block {
|
|
page-break-inside: avoid;
|
|
border: 1px solid #94a3b8 !important;
|
|
background: white !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.signature-pad {
|
|
border: 1px solid #94a3b8 !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.comp-card .cc-body {
|
|
display: block !important; /* Force open all cards when printing */
|
|
}
|
|
|
|
.comp-card .cc-toggle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="fiche">
|
|
<!-- Accessibility Hidden Title -->
|
|
<h2 class="sr-only">Grille critères IA certification - tableau synthétique des 6 compétences et 17 critères, suivi de la version détaillée interactive dépliable par compétence avec ce que le jury évalue, indicateurs attendus et pièges à éviter</h2>
|
|
|
|
<!-- Header -->
|
|
<div class="fiche-header">
|
|
<div class="header-left">
|
|
<div class="fiche-kicker">Certification IA-PRO · Document de référence · C1 à C6</div>
|
|
<div class="fiche-title">Grille critères-IA<br>6 compétences · 17 critères</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="fiche-badge">
|
|
<div class="badge-top">Document</div>
|
|
<div class="badge-bottom">Formateur + apprenant</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 1 -->
|
|
<!-- <div class="section-title">
|
|
<i class="ti ti-table" aria-hidden="true"></i>Tableau synthétique - vue d'ensemble imprimable
|
|
</div>
|
|
|
|
<div class="synth-table">
|
|
<div class="st-head">
|
|
<div class="st-hc">Comp.</div>
|
|
<div class="st-hc">Intitulé & UF</div>
|
|
<div class="st-hc">Critères</div>
|
|
<div class="st-hc">Ce que le jury évalue en résumé</div>
|
|
</div>
|
|
<div class="st-row">
|
|
<div class="st-c st-c-center"><span class="cb bg-p">C1</span></div>
|
|
<div class="st-c">
|
|
<div style="font-size: 0.95rem; font-weight: 800; margin-bottom: 4px;">Utiliser les outils IA générative</div>
|
|
<div style="font-size: 0.8rem; color: var(--color-text-secondary);">UF1 · Ch.1 à Ch.3</div>
|
|
</div>
|
|
<div class="st-c muted">Cr1.1 Identifier les tâches optimisables<br>Cr1.2 Sélectionner les outils adaptés<br>Cr1.3 Justifier selon contexte & RGPD</div>
|
|
<div class="st-c muted">La cohérence entre le choix de l'outil, le contexte professionnel et les enjeux RGPD - pas la popularité de l'outil</div>
|
|
</div>
|
|
<div class="st-row">
|
|
<div class="st-c st-c-center"><span class="cb bg-t">C2</span></div>
|
|
<div class="st-c">
|
|
<div style="font-size: 0.95rem; font-weight: 800; margin-bottom: 4px;">Rédiger des prompts efficaces</div>
|
|
<div style="font-size: 0.8rem; color: var(--color-text-secondary);">UF2 · Ch.1 (Prompt eng.)</div>
|
|
</div>
|
|
<div class="st-c muted">Cr2.1 Structurer selon ROCCO<br>Cr2.2 Itérer et commenter<br>Cr2.3 Adapter selon l'outil</div>
|
|
<div class="st-c muted">Le raisonnement itératif commenté - pas le prompt parfait du premier coup</div>
|
|
</div>
|
|
<div class="st-row">
|
|
<div class="st-c st-c-center"><span class="cb bg-r">C3</span></div>
|
|
<div class="st-c">
|
|
<div style="font-size: 0.95rem; font-weight: 800; margin-bottom: 4px;">Sécuriser l'usage de l'IA</div>
|
|
<div style="font-size: 0.8rem; color: var(--color-text-secondary);">UF3 · Ch.1 & Ch.2</div>
|
|
</div>
|
|
<div class="st-c muted">Cr3.1 Identifier les risques RGPD<br>Cr3.2 Pseudonymiser un prompt<br>Cr3.3 Renvoyer vers le DPO</div>
|
|
<div class="st-c muted">La conformité intelligente (pas la prudence paralysante) et la capacité à ne pas se substituer au juriste</div>
|
|
</div>
|
|
<div class="st-row">
|
|
<div class="st-c st-c-center"><span class="cb bg-b">C4</span></div>
|
|
<div class="st-c">
|
|
<div style="font-size: 0.95rem; font-weight: 800; margin-bottom: 4px;">Concevoir des contenus inclusifs</div>
|
|
<div style="font-size: 0.8rem; color: var(--color-text-secondary);">UF4 · Ch.1 & Ch.2</div>
|
|
</div>
|
|
<div class="st-c muted">Cr4.1 Rédiger un prompt inclusif<br>Cr4.2 Nommer les standards visés<br>Cr4.3 Évaluer le résultat</div>
|
|
<div class="st-c muted">La précision dans les standards nommés (WCAG, FALC) - pas "rendre accessible" de façon générique</div>
|
|
</div>
|
|
<div class="st-row">
|
|
<div class="st-c st-c-center"><span class="cb bg-g">C5</span></div>
|
|
<div class="st-c">
|
|
<div style="font-size: 0.95rem; font-weight: 800; margin-bottom: 4px;">Optimiser les contenus générés</div>
|
|
<div style="font-size: 0.8rem; color: var(--color-text-secondary);">UF2 · Ch.2 & UF4</div>
|
|
</div>
|
|
<div class="st-c muted">Cr5.1 Diagnostiquer les défauts<br>Cr5.2 Guider l'IA pour corriger</div>
|
|
<div class="st-c muted">La capacité à guider l'IA - pas à réécrire soi-même le contenu à la place de l'IA</div>
|
|
</div>
|
|
<div class="st-row">
|
|
<div class="st-c st-c-center"><span class="cb bg-a">C6</span></div>
|
|
<div class="st-c">
|
|
<div style="font-size: 0.95rem; font-weight: 800; margin-bottom: 4px;">Adopter une posture éthique</div>
|
|
<div style="font-size: 0.8rem; color: var(--color-text-secondary);">UF5 · Ch.1 à Ch.3</div>
|
|
</div>
|
|
<div class="st-c muted">Cr6.1 Identifier les biais<br>Cr6.2 Classifier selon l'IA Act<br>Cr6.3 Faciliter sans prendre parti</div>
|
|
<div class="st-c muted">Le raisonnement appliqué (pas la récitation du règlement) et la posture de facilitation neutre</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- Section 2 -->
|
|
<div class="section-title">
|
|
<i class="ti ti-list-details" aria-hidden="true"></i>Cliquez sur une compétence pour déplier
|
|
</div>
|
|
|
|
<div class="detail-block">
|
|
<!-- C1 -->
|
|
<div class="comp-card" id="c1">
|
|
<div class="cc-head" onclick="tog('c1')">
|
|
<div class="cc-icon cci-p"><i class="ti ti-tool" aria-hidden="true"></i></div>
|
|
<div class="cc-meta">
|
|
<div class="cc-num">C1 · UF1</div>
|
|
<div class="cc-title">Utiliser les outils IA générative</div>
|
|
<div class="cc-sub">Identifier, sélectionner, justifier · Cr1.1 à Cr1.3</div>
|
|
</div>
|
|
<i class="ti ti-chevron-down cc-toggle" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="cc-body">
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-p">Cr1.1</span><span class="cr-title">Identifier les tâches optimisables par l'IA</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à hiérarchiser : quelles tâches sont délégables à l'IA, lesquelles ne le sont pas, avec une justification structurée - pas une liste arbitraire.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Utilisation de critères explicites : tâche répétitive, basée sur le langage, sans enjeu décisionnel critique. Mention des limites (décisions RH, médicales, judiciaires).</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>"Tout peut être délégué à l'IA" ou inversement "rien ne peut l'être" - le jury cherche la nuance et le raisonnement, pas la position extrême.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-p">Cr1.2</span><span class="cr-title">Sélectionner les outils IA adaptés au contexte</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Cohérence entre le choix de l'outil et le profil métier de l'apprenant - budget, intégration aux outils existants, nature des données traitées.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Comparaison de 2 à 3 outils maximum. Argumentation contextualisée : "Mistral plutôt que ChatGPT parce que données RH sensibles + hébergement EU".</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Justifier uniquement par la popularité : "ChatGPT parce que tout le monde l'utilise" - sans croiser contexte, RGPD et intégration.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-p">Cr1.3</span><span class="cr-title">Justifier le choix selon le contexte RGPD</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Intégration systématique de la dimension RGPD dans la sélection d'outil - surtout quand les données impliquées sont personnelles (clients, RH, santé).</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Mention de la localisation d'hébergement, de la politique de réentraînement du modèle, du niveau de sensibilité des données. Formule : "pour des données clients, je privilégie un outil conforme RGPD avec hébergement EU".</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Omettre complètement la dimension RGPD sur des usages impliquant des données sensibles - c'est un oubli qui coûte des points.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C2 -->
|
|
<div class="comp-card" id="c2">
|
|
<div class="cc-head" onclick="tog('c2')">
|
|
<div class="cc-icon cci-t"><i class="ti ti-prompt" aria-hidden="true"></i></div>
|
|
<div class="cc-meta">
|
|
<div class="cc-num">C2 · UF2 Ch.1</div>
|
|
<div class="cc-title">Rédiger des prompts efficaces</div>
|
|
<div class="cc-sub">Structurer (ROCCO), itérer, commenter · Cr2.1 à Cr2.3</div>
|
|
</div>
|
|
<i class="ti ti-chevron-down cc-toggle" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="cc-body">
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-t">Cr2.1</span><span class="cr-title">Structurer le prompt selon la méthode ROCCO</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Présence explicite et cohérente des 5 composantes : Rôle, Objectif, Contexte, Contraintes, Output. Chaque composante doit être identifiable dans le prompt soumis.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Les 5 lettres ROCCO couvertes. Cohérence interne : le rôle donné à l'IA est cohérent avec l'objectif visé. L'output décrit le format exact attendu (liste, tableau, texte, longueur).</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Oublier le O (Output) et le second C (Contraintes) - les deux composantes les plus souvent absentes en situation de stress.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-t">Cr2.2</span><span class="cr-title">Itérer et commenter son raisonnement</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">La preuve d'une démarche itérative : le formateur ne présente pas directement "la bonne version" - il montre le premier résultat, identifie ce qui ne va pas, reformule, améliore.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Au moins 1 itération visible et commentée à voix haute : "j'obtiens X, ce n'est pas assez précis parce que… j'ajoute Y pour améliorer". Le raisonnement compte autant que le résultat.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Présenter directement la meilleure version sans montrer la démarche - le jury évalue le processus, pas seulement le produit fini.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-t">Cr2.3</span><span class="cr-title">Adapter le prompt selon l'outil utilisé</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Conscience que chaque modèle a ses spécificités - un prompt optimisé pour ChatGPT peut donner un résultat différent sur Mistral ou Gemini. Capacité à ajuster.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Au moins 1 mention d'une différence entre 2 outils sur un usage concret. Ne pas promettre qu'un prompt fonctionnera identiquement sur tous les modèles.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>"Ce prompt marche sur tous les outils" - formule à proscrire. Les modèles diffèrent en longueur de contexte, ton, format de réponse.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C3 -->
|
|
<div class="comp-card" id="c3">
|
|
<div class="cc-head" onclick="tog('c3')">
|
|
<div class="cc-icon cci-r"><i class="ti ti-shield" aria-hidden="true"></i></div>
|
|
<div class="cc-meta">
|
|
<div class="cc-num">C3 · UF3</div>
|
|
<div class="cc-title">Sécuriser l'usage de l'IA</div>
|
|
<div class="cc-sub">RGPD, IA Act, shadow AI, DPO · Cr3.1 à Cr3.3</div>
|
|
</div>
|
|
<i class="ti ti-chevron-down cc-toggle" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="cc-body">
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-r">Cr3.1</span><span class="cr-title">Identifier les risques RGPD dans un usage IA donné</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à repérer les données personnelles dans un contexte réel et à nommer le risque précis : transfert hors UE, réentraînement du modèle, catégorie spéciale (santé, origine, etc.).</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Identification de chaque donnée problématique dans l'exemple fourni. Formule de référence : "cette donnée est sensible au sens RGPD parce que…". Mention du type de risque (transfert, fuite, réidentification).</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Confondre "anonymisé" et "sans risque" - des données apparemment anonymes peuvent permettre une réidentification croisée.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-r">Cr3.2</span><span class="cr-title">Pseudonymiser ou reformuler un prompt non conforme</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à réécrire un prompt contenant des données personnelles identifiantes de façon conforme - tout en conservant l'utilité opérationnelle du prompt.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Suppression ou pseudonymisation de chaque donnée nominative. Reformulation qui reste fonctionnelle. Principe à démontrer : "l'IA n'a pas besoin du nom réel pour être utile - elle a besoin du contexte et de la structure".</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Supprimer toutes les informations au point de rendre le prompt inutilisable - le jury cherche la conformité intelligente, pas la prudence paralysante.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-r">Cr3.3</span><span class="cr-title">Savoir renvoyer vers le DPO sans se substituer au juriste</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à tracer une ligne claire entre sensibilisation (rôle du formateur) et conseil juridique (rôle du DPO / juriste). Savoir dire "je ne suis pas en mesure de répondre à ça" sans perdre en crédibilité.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Formule explicite et naturelle : "ce n'est pas mon rôle de vous conseiller juridiquement - pour votre situation précise, consultez votre DPO ou service juridique". Dite sans hésitation, sans s'excuser.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Répondre à une question juridique précise (ex. : "est-ce que mon entreprise risque une amende ?") en citant des chiffres d'amendes - c'est du conseil juridique.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C4 -->
|
|
<div class="comp-card" id="c4">
|
|
<div class="cc-head" onclick="tog('c4')">
|
|
<div class="cc-icon cci-b"><i class="ti ti-accessible" aria-hidden="true"></i></div>
|
|
<div class="cc-meta">
|
|
<div class="cc-num">C4 · UF4</div>
|
|
<div class="cc-title">Concevoir des contenus inclusifs</div>
|
|
<div class="cc-sub">WCAG, FALC, déficiences visuelles & auditives · Cr4.1 à Cr4.3</div>
|
|
</div>
|
|
<i class="ti ti-chevron-down cc-toggle" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="cc-body">
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-b">Cr4.1</span><span class="cr-title">Rédiger un prompt intégrant des critères d'accessibilité</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à formuler une demande à l'IA qui intègre explicitement des critères d'accessibilité définis - pas "rends ça accessible" mais "rédige ce texte en respectant les critères FALC : phrases courtes, mots simples, une idée par phrase".</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Le standard est nommé dans le prompt (WCAG 2.1 AA, FALC, audiodescription, sous-titrage SRT). Les critères concrets sont explicités - pas une mention vague. L'IA reçoit assez de précision pour produire quelque chose de conforme.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>"Écris ça de façon claire et simple" - la clarté n'est pas l'accessibilité. Le jury teste la distinction WCAG / FALC / accessibilité cognitive.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-b">Cr4.2</span><span class="cr-title">Nommer et distinguer les standards d'accessibilité</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Maîtrise des distinctions essentielles : WCAG (accessibilité web, contraste, navigation clavier, lecture d'écran) vs FALC (accessibilité cognitive, lecture simplifiée) vs sous-titrage (accessibilité auditive).</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Utilisation des termes exacts dans le bon contexte. Exemple : pour un contenu destiné à des personnes malvoyantes, citer la lisibilité des polices, le contraste WCAG AA et la compatibilité avec les lecteurs d'écran - pas le FALC.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Confondre FALC (accessibilité cognitive) et sous-titrage (accessibilité auditive) - ou utiliser les deux comme synonymes de "rendre plus simple".</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-b">Cr4.3</span><span class="cr-title">Évaluer le résultat selon les critères d'accessibilité définis</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à lire un contenu produit par l'IA et à vérifier s'il répond aux critères demandés - pas juste "c'est mieux", mais "ce critère est respecté / ce critère ne l'est pas encore parce que…".</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Vérification structurée : critère par critère, avec justification. Si le résultat ne satisfait pas un critère, reformuler le prompt de correction (lien avec C5).</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Valider le résultat sans vérification structurée ("c'est bien") - ou le rejeter sans nommer ce qui ne va pas.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C5 -->
|
|
<div class="comp-card" id="c5">
|
|
<div class="cc-head" onclick="tog('c5')">
|
|
<div class="cc-icon cci-g"><i class="ti ti-sparkles" aria-hidden="true"></i></div>
|
|
<div class="cc-meta">
|
|
<div class="cc-num">C5 · UF2 & UF4</div>
|
|
<div class="cc-title">Optimiser les contenus générés</div>
|
|
<div class="cc-sub">Diagnostiquer, guider l'IA, ne pas réécrire soi-même · Cr5.1 & Cr5.2</div>
|
|
</div>
|
|
<i class="ti ti-chevron-down cc-toggle" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="cc-body">
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-g">Cr5.1</span><span class="cr-title">Diagnostiquer les défauts d'un contenu généré</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à analyser un contenu produit par l'IA selon des critères définis (ton, format, longueur, public cible, exactitude) et à nommer précisément ce qui ne va pas - pas "c'est pas top".</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Diagnostic structuré avant toute correction : "le ton est trop formel pour ce public", "le format ne respecte pas la contrainte longueur", "l'exemple est hors contexte". Minimum 2 défauts identifiés et nommés.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Valider globalement ("c'est bien mais…") sans diagnostic précis - ou rejeter sans nommer les défauts spécifiques.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-g">Cr5.2</span><span class="cr-title">Rédiger un prompt de correction et guider l'IA</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à demander à l'IA d'améliorer le contenu plutôt que de le réécrire soi-même. L'IA est l'outil de correction - le formateur la guide avec précision.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Un prompt de correction qui cite les défauts identifiés en Cr5.1 et demande des modifications précises. Comparaison avant/après visible. Le contenu final est produit par l'IA, pas par le formateur.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Réécrire le contenu soi-même au lieu de passer par un prompt de correction - c'est l'erreur la plus fréquente et la plus pénalisée sur C5.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C6 -->
|
|
<div class="comp-card" id="c6">
|
|
<div class="cc-head" onclick="tog('c6')">
|
|
<div class="cc-icon cci-a"><i class="ti ti-scale" aria-hidden="true"></i></div>
|
|
<div class="cc-meta">
|
|
<div class="cc-num">C6 · UF5</div>
|
|
<div class="cc-title">Adopter une posture éthique face à l'IA</div>
|
|
<div class="cc-sub">Biais, IA Act, sobriété, facilitation neutre · Cr6.1 à Cr6.3</div>
|
|
</div>
|
|
<i class="ti ti-chevron-down cc-toggle" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="cc-body">
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-a">Cr6.1</span><span class="cr-title">Identifier et nommer les biais d'un système IA</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à reconnaître un biais algorithmique dans un exemple concret et à l'expliquer sans jargon - stéréotypes de genre, biais culturels, représentation des données d'entraînement.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Identification du type de biais (genre, culturel, géographique…). Explication du mécanisme : pourquoi l'IA produit ce résultat. Mention d'une stratégie pour le limiter (reformulation du prompt, vérification humaine).</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>"L'IA est biaisée donc il ne faut pas l'utiliser" - le jury cherche une posture de conscience et de limitation, pas de rejet total.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-a">Cr6.2</span><span class="cr-title">Classifier un usage selon l'IA Act et en déduire les obligations</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Application raisonnée de la classification IA Act (inacceptable / élevé / limité / minimal) à un cas concret - avec la conséquence pratique qui en découle.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Niveau de risque correct + justification + obligation principale : "cet usage est à risque élevé donc il nécessite transparence, supervision humaine et documentation". La chaîne de raisonnement est complète.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Confondre "risque élevé" et "interdit" - risque élevé = autorisé avec obligations. Seul "inacceptable" = interdit.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cr-block">
|
|
<div class="cr-head"><span class="cr-num-badge bg-a">Cr6.3</span><span class="cr-title">Faciliter un débat éthique sans imposer son opinion</span></div>
|
|
<div class="cr-grid">
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Ce que le jury évalue</div>
|
|
<div class="cr-col-text">Capacité à animer une discussion sur les impacts de l'IA (emploi, sobriété, responsabilité) en maintenant une posture neutre - accueillir toutes les positions sans les valider ni les invalider, et ramener au cap pédagogique.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Indicateurs attendus</div>
|
|
<div class="cr-col-text">Formules de facilitation neutres ("c'est une position que beaucoup partagent", "qu'en pensent les autres ?"). Recadrage vers l'objectif sans couper la parole. Aucune prise de position personnelle visible.</div>
|
|
</div>
|
|
<div class="cr-col">
|
|
<div class="cr-col-lbl">Piège à éviter</div>
|
|
<div class="cr-col-text">
|
|
<div class="piege-pill">
|
|
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
|
<span>Moraliser sur la sobriété numérique ou "défendre l'IA" face à un sceptique - le formateur facilite, il ne convainc pas.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Footer strip with print button -->
|
|
<div class="footer-strip">
|
|
<div class="footer-note">Grille de critères de certification IA-PRO à conserver en interne le formateur et l'apprenant.</div>
|
|
<!-- <button class="print-btn" onclick="window.print()">
|
|
<i class="ti ti-printer" aria-hidden="true"></i>Imprimer la grille
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function tog(id) {
|
|
const el = document.getElementById(id);
|
|
el.classList.toggle('open');
|
|
}
|
|
|
|
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() {
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
resizeCanvas();
|
|
// Recharger la signature après redimensionnement
|
|
const savedSignature = localStorage.getItem('signatureData_gc');
|
|
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
|
|
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];
|
|
}
|
|
|
|
// Evénements souris et tactiles
|
|
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; });
|
|
|
|
// Actions signature
|
|
window.clearSignature = function () {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
localStorage.removeItem('signatureData_gc');
|
|
};
|
|
|
|
window.saveSignature = function () {
|
|
const signatureData = canvas.toDataURL('image/png');
|
|
localStorage.setItem('signatureData_gc', signatureData);
|
|
return signatureData;
|
|
};
|
|
|
|
// Chargement initial
|
|
const savedSignature = localStorage.getItem('signatureData_gc');
|
|
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_gc');
|
|
if (savedDate) signatureDate.value = savedDate;
|
|
|
|
signatureDate.addEventListener('input', () => {
|
|
localStorage.setItem('signatureDate_gc', signatureDate.value);
|
|
});
|
|
|
|
initCanvas();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|