sebvtl728
957 lines
30 KiB
HTML
957 lines
30 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Fiche classe inversée - Formation IA</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 (Amber) */
|
||
--color-a-bg: hsl(36, 85%, 96%);
|
||
--color-a-border: hsl(36, 80%, 88%);
|
||
--color-a-accent: hsl(36, 90%, 45%);
|
||
--color-a-dark: hsl(36, 95%, 22%);
|
||
}
|
||
|
||
/* Dark Mode Custom Overrides */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg-primary: #090d16;
|
||
--bg-secondary: #111827;
|
||
--bg-tertiary: #1f2937;
|
||
|
||
--primary-light: hsl(247, 40%, 16%);
|
||
--primary-dark: hsl(247, 85%, 80%);
|
||
|
||
--color-text-primary: #f8fafc;
|
||
--color-text-secondary: #94a3b8;
|
||
--color-text-tertiary: #64748b;
|
||
|
||
--color-border-primary: #1e293b;
|
||
--color-border-secondary: #334155;
|
||
--color-border-tertiary: #1f2937;
|
||
|
||
--color-a-bg: hsl(36, 45%, 11%);
|
||
--color-a-border: hsl(36, 40%, 19%);
|
||
--color-a-accent: hsl(36, 85%, 58%);
|
||
--color-a-dark: hsl(36, 90%, 82%);
|
||
|
||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
|
||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
||
--shadow-lg: 0 12px 20px -3px rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
* {
|
||
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;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
body {
|
||
background-image:
|
||
radial-gradient(at 0% 0%, hsla(247, 80%, 62%, 0.08) 0px, transparent 50%),
|
||
radial-gradient(at 100% 0%, hsla(162, 75%, 34%, 0.04) 0px, transparent 50%),
|
||
radial-gradient(at 50% 100%, hsla(36, 90%, 45%, 0.04) 0px, transparent 50%);
|
||
}
|
||
}
|
||
|
||
.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.25rem;
|
||
font-weight: 900;
|
||
color: var(--primary-dark);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* Identity input cards */
|
||
.identity-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* Instructions & Reminder boxes */
|
||
.intro-block {
|
||
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);
|
||
}
|
||
|
||
.intro-block p {
|
||
font-size: 0.9rem;
|
||
font-style: italic;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.reminder-box {
|
||
background: var(--color-a-bg);
|
||
border: 1px solid var(--color-a-border);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 14px 20px;
|
||
margin-bottom: 2rem;
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.reminder-box i {
|
||
color: var(--color-a-accent);
|
||
font-size: 1.3rem;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.reminder-box p {
|
||
font-size: 0.9rem;
|
||
color: var(--color-a-dark);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.reminder-box strong {
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* Question Block Cards */
|
||
.question-block {
|
||
margin-bottom: 2rem;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
padding: 20px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.question-block:hover {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.q-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.q-num {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: var(--primary-light);
|
||
border: 1px solid var(--color-border-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
font-weight: 800;
|
||
color: var(--primary-dark);
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.q-text {
|
||
font-size: 0.95rem;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.q-hint {
|
||
font-size: 0.825rem;
|
||
color: var(--color-text-secondary);
|
||
font-style: italic;
|
||
line-height: 1.5;
|
||
margin-left: 42px;
|
||
margin-bottom: 12px;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
/* Textarea inputs */
|
||
.write-area {
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
background: var(--bg-primary);
|
||
width: 100%;
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text-primary);
|
||
padding: 12px 16px;
|
||
resize: vertical;
|
||
outline: none;
|
||
line-height: 1.6;
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.write-area:focus {
|
||
border-color: var(--primary);
|
||
background: var(--bg-secondary);
|
||
box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12), var(--shadow-md);
|
||
}
|
||
|
||
.write-area::placeholder {
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* UF Interactive Grid */
|
||
.uf-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-left: 42px;
|
||
margin-top: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.uf-card {
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.uf-card:focus-within {
|
||
border-color: var(--primary);
|
||
box-shadow: var(--shadow-md);
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.uf-label {
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
color: var(--primary-dark);
|
||
background: var(--primary-light);
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
width: fit-content;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.uf-name {
|
||
font-size: 0.85rem;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.45;
|
||
min-height: 38px;
|
||
}
|
||
|
||
.uf-grid .uf-card:nth-child(5) {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
/* Two column custom input groups */
|
||
.two-col-areas {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-left: 42px;
|
||
margin-top: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.mini-area-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.mini-label {
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.divider {
|
||
border: none;
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
margin: 2.5rem 0 1.5rem 0;
|
||
}
|
||
|
||
/* Confidence level tag group */
|
||
.level-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-left: 42px;
|
||
margin-top: 12px;
|
||
margin-bottom: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.level-opt {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: 20px;
|
||
padding: 8px 16px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.level-opt:hover {
|
||
border-color: var(--primary);
|
||
background: var(--primary-light);
|
||
}
|
||
|
||
.level-opt input[type="radio"] {
|
||
accent-color: var(--primary);
|
||
width: 16px;
|
||
height: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.level-opt span {
|
||
font-size: 0.85rem;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* Footer */
|
||
.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: 70%;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* Responsive CSS Overrides */
|
||
@media (max-width: 860px) {
|
||
.fiche {
|
||
padding: 1.5rem 16px;
|
||
}
|
||
|
||
.identity-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.uf-grid {
|
||
grid-template-columns: 1fr;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.uf-grid .uf-card:nth-child(5) {
|
||
grid-column: span 1;
|
||
}
|
||
|
||
.two-col-areas {
|
||
grid-template-columns: 1fr;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.level-row {
|
||
margin-left: 0;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
}
|
||
|
||
.level-opt {
|
||
width: 100%;
|
||
}
|
||
|
||
.q-hint {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
body {
|
||
--bg-secondary: #ffffff !important;
|
||
--color-text-primary: #000000 !important;
|
||
}
|
||
}
|
||
|
||
.fiche {
|
||
max-width: 100% !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.print-btn {
|
||
display: none !important;
|
||
}
|
||
|
||
.question-block {
|
||
page-break-inside: avoid;
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.write-area {
|
||
background: white !important;
|
||
border: 1px solid #94a3b8 !important;
|
||
resize: none;
|
||
}
|
||
|
||
.uf-card {
|
||
page-break-inside: avoid;
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.uf-grid .uf-card:nth-child(5) {
|
||
grid-column: span 2 !important;
|
||
}
|
||
|
||
.level-opt {
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
}
|
||
|
||
.id-field {
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="fiche">
|
||
<!-- Accessibility Hidden Title -->
|
||
<h2 class="sr-only">Fiche classe inversée, Posture et architecture pédagogique, à compléter avant la séance</h2>
|
||
|
||
<!-- Header -->
|
||
<div class="fiche-header">
|
||
<div>
|
||
<div class="fiche-kicker">Formation de formateurs IA-PRO · Classe inversée</div>
|
||
<div class="fiche-title">Fiche de préparation<br />Posture & architecture pédagogique</div>
|
||
</div>
|
||
<div class="fiche-badge">
|
||
<div class="badge-top">Durée estimée</div>
|
||
<div class="badge-bottom">~45 min</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Identity card row -->
|
||
<div class="identity-row">
|
||
<div class="id-field">
|
||
<span class="field-label">Prénom & nom</span>
|
||
<input class="field-line" type="text" placeholder="Votre nom" />
|
||
</div>
|
||
<div class="id-field">
|
||
<span class="field-label">Date de la séance</span>
|
||
<input class="field-line" type="text" placeholder="Mercredi __/__/____" />
|
||
</div>
|
||
<div class="id-field">
|
||
<span class="field-label">Complétée le</span>
|
||
<input class="field-line" type="text" placeholder="__/__/____" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Informative Intro Block -->
|
||
<div class="intro-block">
|
||
<p>Avant la séance, lisez le scénario IA-PRO en mode « parcours rapide » : parcourez les 5 UF, les chapitres, les méthodes et les durées. Complétez ensuite cette fiche. Elle sera le point de départ du débrief collectif en séance.</p>
|
||
</div>
|
||
|
||
<!-- Warning Reminder capsule -->
|
||
<div class="reminder-box" aria-label="Conseil de lecture">
|
||
<i class="ti ti-book" aria-hidden="true"></i>
|
||
<p><strong>Mode lecture rapide :</strong> vous n'avez pas besoin de tout lire en détail. L'objectif est d'arriver en séance avec une première représentation mentale de la structure de la formation — pas d'en être expert.</p>
|
||
</div>
|
||
|
||
<!-- PART 1 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-layout-grid" aria-hidden="true"></i>Partie 1 — Vue d'ensemble du scénario
|
||
</div>
|
||
|
||
<!-- Question 1 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">1</div>
|
||
<div class="q-text">Après votre lecture rapide, quelle est votre impression générale de la structure de la formation IA-PRO ? Comment décririez-vous sa logique de progression en quelques mots ?</div>
|
||
</div>
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : la formation part du général (panorama IA) pour aller vers le particulier (éthique, accessibilité)…"></textarea>
|
||
</div>
|
||
|
||
<!-- Question 2 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">2</div>
|
||
<div class="q-text">Parcourez les 5 unités de formation. Pour chacune, notez en 2-3 mots ce qui vous semble être son intention principale.</div>
|
||
</div>
|
||
|
||
<!-- Grid comprising all 5 UF cards -->
|
||
<div class="uf-grid">
|
||
<!-- UF1 -->
|
||
<div class="uf-card">
|
||
<div class="uf-label">UF1</div>
|
||
<div class="uf-name">Présentation & utilisation de l'IA générative</div>
|
||
<textarea class="write-area" rows="2" style="margin-top: 6px" placeholder="Intention…"></textarea>
|
||
</div>
|
||
|
||
<!-- UF2 -->
|
||
<div class="uf-card">
|
||
<div class="uf-label">UF2</div>
|
||
<div class="uf-name">Rédaction, prompt engineering, contenu visuel</div>
|
||
<textarea class="write-area" rows="2" style="margin-top: 6px" placeholder="Intention…"></textarea>
|
||
</div>
|
||
|
||
<!-- UF3 -->
|
||
<div class="uf-card">
|
||
<div class="uf-label">UF3</div>
|
||
<div class="uf-name">Confidentialité & sécurisation des données</div>
|
||
<textarea class="write-area" rows="2" style="margin-top: 6px" placeholder="Intention…"></textarea>
|
||
</div>
|
||
|
||
<!-- UF4 -->
|
||
<div class="uf-card">
|
||
<div class="uf-label">UF4</div>
|
||
<div class="uf-name">Contenus inclusifs & accessibles</div>
|
||
<textarea class="write-area" rows="2" style="margin-top: 6px" placeholder="Intention…"></textarea>
|
||
</div>
|
||
|
||
<!-- UF5 (Spans 2 columns) -->
|
||
<div class="uf-card">
|
||
<div class="uf-label">UF5</div>
|
||
<div class="uf-name">Éthique, impacts sociaux & études de cas</div>
|
||
<textarea class="write-area" rows="2" style="margin-top: 6px" placeholder="Intention…"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- PART 2 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-star" aria-hidden="true"></i>Partie 2 — Vos 2 séquences importantes
|
||
</div>
|
||
|
||
<!-- Question 3 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">3</div>
|
||
<div class="q-text">Identifiez 2 séquences de la formation IA-PRO qui vous semblent particulièrement importantes à maîtriser en tant que formateur. Précisez pourquoi.</div>
|
||
</div>
|
||
|
||
<div class="two-col-areas">
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Séquence 1 — Titre / UF</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : UF1 – Analyse du contexte professionnel (TP)"></textarea>
|
||
</div>
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Pourquoi elle vous semble importante</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : C'est le premier moment de personnalisation pour l'apprenant…"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="two-col-areas" style="margin-top: 12px;">
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Séquence 2 — Titre / UF</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : UF2 – Rédiger des prompts efficaces (Ch.1)"></textarea>
|
||
</div>
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Pourquoi elle vous semble importante</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : C'est le cœur de l'UF2 et la compétence la plus attendue…"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- PART 3 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-help-circle" aria-hidden="true"></i>Partie 3 — Votre question sur la logique du scénario
|
||
</div>
|
||
|
||
<!-- Question 4 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">4</div>
|
||
<div class="q-text">Notez 1 question que vous vous posez sur la logique pédagogique du scénario — un choix que vous ne comprenez pas encore, une articulation qui vous paraît floue.</div>
|
||
</div>
|
||
<p class="q-hint">C'est cette question qui ouvrira le débrief collectif en séance. Il n'y a pas de mauvaise question.</p>
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : Pourquoi la classe inversée est-elle utilisée dès l'UF1 et pas seulement pour les contenus avancés ?"></textarea>
|
||
</div>
|
||
|
||
<!-- Question 5 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">5</div>
|
||
<div class="q-text">Y a-t-il une méthode pédagogique utilisée dans le scénario (breakout rooms, classe inversée, micro-teaching, quiz…) dont vous vous demandez comment l'animer efficacement en visio ?</div>
|
||
</div>
|
||
<div class="two-col-areas">
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">La méthode en question</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : Les breakout rooms"></textarea>
|
||
</div>
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Ce qui vous interroge</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : Comment gérer les groupes qui avancent à des rythmes différents ?"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider" />
|
||
|
||
<!-- PART 4 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-mood-check" aria-hidden="true"></i>Partie 4 — Positionnement avant la séance
|
||
</div>
|
||
|
||
<!-- Question 6 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">6</div>
|
||
<div class="q-text">Comment vous sentez-vous face au fait d'animer cette formation IA-PRO ?</div>
|
||
</div>
|
||
|
||
<!-- Premium confidence level tag list -->
|
||
<div class="level-row" role="radiogroup" aria-label="Niveau de confiance">
|
||
<label class="level-opt">
|
||
<input type="radio" name="conf" value="1" />
|
||
<span>Peu confiant(e)</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="conf" value="2" />
|
||
<span>Plutôt hésitant(e)</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="conf" value="3" />
|
||
<span>Assez à l'aise</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="conf" value="4" />
|
||
<span>Confiant(e)</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="conf" value="5" />
|
||
<span>Très confiant(e)</span>
|
||
</label>
|
||
</div>
|
||
|
||
<textarea class="write-area" rows="2" style="margin-top: 12px" placeholder="Ce qui motive cette position en quelques mots (facultatif)…"></textarea>
|
||
</div>
|
||
|
||
<!-- Question 7 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">7</div>
|
||
<div class="q-text">Qu'attendez-vous de ce premier mercredi ? Qu'est-ce qui serait un vrai succès pour vous à l'issue de la séance ?</div>
|
||
</div>
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : Comprendre pourquoi le scénario est construit comme ça et repartir avec une image claire de ce que je dois animer…"></textarea>
|
||
</div>
|
||
|
||
<!-- Footer section with print button -->
|
||
<div class="footer-strip">
|
||
<div class="footer-note">À apporter en séance (ou partager via le drive de formation avant le mercredi 1). Cette fiche est votre point d'entrée dans le débrief collectif.</div>
|
||
<button class="print-btn" onclick="window.print()">
|
||
<i class="ti ti-printer" aria-hidden="true"></i>Imprimer la fiche
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Active Auto-save script -->
|
||
<script>
|
||
// Auto-save & Load for Textareas
|
||
const textareas = document.querySelectorAll('textarea');
|
||
textareas.forEach((t, index) => {
|
||
const savedVal = localStorage.getItem(`textarea_fiche_${index}`);
|
||
if (savedVal) t.value = savedVal;
|
||
|
||
t.addEventListener('input', () => {
|
||
localStorage.setItem(`textarea_fiche_${index}`, t.value);
|
||
});
|
||
});
|
||
|
||
// Auto-save & Load for Text Inputs
|
||
const textInputs = document.querySelectorAll('input[type="text"]');
|
||
textInputs.forEach((input, index) => {
|
||
const savedVal = localStorage.getItem(`input_fiche_${index}`);
|
||
if (savedVal) input.value = savedVal;
|
||
|
||
input.addEventListener('input', () => {
|
||
localStorage.setItem(`input_fiche_${index}`, input.value);
|
||
});
|
||
});
|
||
|
||
// Auto-save & Load for Radio Inputs
|
||
const radios = document.querySelectorAll('input[type="radio"]');
|
||
radios.forEach((radio) => {
|
||
const savedVal = localStorage.getItem('radio_fiche_conf');
|
||
if (savedVal && radio.value === savedVal) {
|
||
radio.checked = true;
|
||
}
|
||
|
||
radio.addEventListener('change', () => {
|
||
localStorage.setItem('radio_fiche_conf', radio.value);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|