1801 lines
54 KiB
HTML
1801 lines
54 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 Mercredi 4</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;
|
||
}
|
||
|
||
/* Header Right Container & Timer styles */
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Timer Widget */
|
||
.timer-pill {
|
||
background: var(--primary-light);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-md);
|
||
padding: 8px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
box-shadow: var(--shadow-md);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.timer-texts {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.timer-label {
|
||
font-size: 0.65rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--primary-dark);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.timer-display {
|
||
font-size: 1.35rem;
|
||
font-weight: 900;
|
||
color: var(--primary-dark);
|
||
min-width: 60px;
|
||
line-height: 1.1;
|
||
text-align: center;
|
||
}
|
||
|
||
.timer-controls {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tcbtn {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: 8px;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 0.95rem;
|
||
color: var(--color-text-primary);
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.tcbtn:hover {
|
||
background: var(--primary);
|
||
color: white;
|
||
border-color: var(--primary);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(117, 95, 236, 0.25);
|
||
}
|
||
|
||
.tcbtn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
@keyframes pulse-timer {
|
||
0% { box-shadow: 0 0 0 0 hsla(247, 80%, 62%, 0.4); }
|
||
70% { box-shadow: 0 0 0 10px hsla(247, 80%, 62%, 0); }
|
||
100% { box-shadow: 0 0 0 0 hsla(247, 80%, 62%, 0); }
|
||
}
|
||
|
||
.timer-pill.ticking {
|
||
animation: pulse-timer 2s infinite;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
* {
|
||
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.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);
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.intro-block i {
|
||
color: var(--primary);
|
||
font-size: 1.3rem;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.intro-block p {
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.intro-block strong {
|
||
color: var(--color-text-primary);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.reminder-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);
|
||
}
|
||
|
||
.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 {
|
||
color: #501313;
|
||
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;
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
/* Micro-block card styling */
|
||
.micro-block {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
margin-bottom: 2rem;
|
||
overflow: hidden;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.micro-block:hover {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.micro-head {
|
||
background: var(--primary-light);
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
padding: 14px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.micro-head i {
|
||
color: var(--primary);
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.micro-head-lbl {
|
||
font-size: 0.8rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--primary-dark);
|
||
}
|
||
|
||
.micro-body {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.mb-row {
|
||
display: grid;
|
||
grid-template-columns: 180px 1fr;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.mb-key {
|
||
font-size: 0.75rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.divider {
|
||
border: none;
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
margin: 2.5rem 0 1.5rem 0;
|
||
}
|
||
|
||
/* Auto-evaluation grid styles */
|
||
.autoe-block {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
margin-bottom: 2rem;
|
||
overflow: hidden;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
.autoe-block:hover {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.autoe-head {
|
||
background: var(--primary-light);
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
padding: 14px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.autoe-head i {
|
||
color: var(--primary);
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.autoe-lbl {
|
||
font-size: 0.8rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--primary-dark);
|
||
}
|
||
|
||
.autoe-body {
|
||
padding: 0;
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.comp-row {
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
display: grid;
|
||
grid-template-columns: 48px 1fr 140px 1.5fr;
|
||
gap: 0;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.comp-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.comp-row.header {
|
||
background: var(--bg-tertiary);
|
||
}
|
||
|
||
.cr-num {
|
||
padding: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-right: 1px solid var(--color-border-secondary);
|
||
}
|
||
|
||
.cr-num span {
|
||
width: 24px;
|
||
height: 24px;
|
||
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.75rem;
|
||
font-weight: 800;
|
||
color: var(--primary-dark);
|
||
}
|
||
|
||
.cr-num.head span {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
width: auto;
|
||
height: auto;
|
||
}
|
||
|
||
.cr-comp {
|
||
padding: 12px;
|
||
border-right: 1px solid var(--color-border-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.cr-comp-text {
|
||
font-size: 0.9rem;
|
||
font-weight: 800;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.cr-comp-sub {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-secondary);
|
||
margin-top: 4px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.cr-scale {
|
||
padding: 12px;
|
||
border-right: 1px solid var(--color-border-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cr-scale.head {
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
justify-content: center;
|
||
}
|
||
|
||
.sopt {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sopt input {
|
||
accent-color: var(--primary);
|
||
width: 14px;
|
||
height: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sopt span {
|
||
font-size: 0.7rem;
|
||
font-weight: 700;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.cr-obs {
|
||
padding: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.cr-obs-ta {
|
||
width: 100%;
|
||
border: 1px solid var(--color-border-secondary);
|
||
border-radius: var(--border-radius-sm);
|
||
background: var(--bg-primary);
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-primary);
|
||
padding: 6px 10px;
|
||
resize: vertical;
|
||
outline: none;
|
||
line-height: 1.4;
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.cr-obs-ta:focus {
|
||
border-color: var(--primary);
|
||
background: var(--bg-secondary);
|
||
box-shadow: 0 0 0 3px hsla(247, 80%, 62%, 0.12);
|
||
}
|
||
|
||
.cr-obs-ta::placeholder {
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
}
|
||
|
||
.cr-obs.head {
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.synth-row {
|
||
padding: 16px 20px;
|
||
background: var(--bg-tertiary);
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.sr-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.sr-lbl {
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
/* Confidence / Stress 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 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%;
|
||
}
|
||
|
||
.footer-btns {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
.header-right {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
gap: 12px;
|
||
}
|
||
|
||
.identity-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.two-col-areas {
|
||
grid-template-columns: 1fr;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.mb-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 6px;
|
||
}
|
||
|
||
.mb-key {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.comp-row {
|
||
grid-template-columns: 1fr;
|
||
border-bottom: 2px solid var(--color-border-secondary);
|
||
}
|
||
|
||
.comp-row.header {
|
||
display: none;
|
||
}
|
||
|
||
.cr-num {
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
justify-content: flex-start;
|
||
background: var(--bg-tertiary);
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.cr-comp {
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
}
|
||
|
||
.cr-scale {
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
justify-content: flex-start;
|
||
gap: 16px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.sopt {
|
||
flex-direction: row;
|
||
gap: 6px;
|
||
flex: none;
|
||
}
|
||
|
||
.cr-obs {
|
||
padding: 12px;
|
||
}
|
||
|
||
.synth-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.level-row {
|
||
margin-left: 0;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
}
|
||
|
||
.level-opt {
|
||
width: 100%;
|
||
}
|
||
|
||
.q-hint {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
|
||
.footer-btns {
|
||
flex-direction: column;
|
||
width: 100%;
|
||
gap: 8px;
|
||
}
|
||
|
||
.footer-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;
|
||
}
|
||
|
||
.print-btn, .timer-pill, .signature-pad-controls {
|
||
display: none !important;
|
||
}
|
||
|
||
.question-block, .micro-block, .autoe-block, .signature-block {
|
||
page-break-inside: avoid;
|
||
border: 1px solid #94a3b8 !important;
|
||
background: white !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.write-area, .cr-obs-ta {
|
||
background: white !important;
|
||
border: 1px solid #94a3b8 !important;
|
||
resize: none;
|
||
}
|
||
|
||
.level-opt, .id-field, .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="fiche">
|
||
<!-- Accessibility Hidden Title -->
|
||
<h2 class="sr-only">Fiche classe inversée à compléter avant le Mercredi 4 - préparation de la mise en situation 20 minutes toutes UF, note de préparation 3-4 phrases, et grille d'autoévaluation à blanc C1 à C6</h2>
|
||
|
||
<!-- Header -->
|
||
<div class="fiche-header">
|
||
<div class="header-left">
|
||
<div class="fiche-kicker">Formation de formateurs IA-PRO · Classe inversée · Séance 4/5</div>
|
||
<div class="fiche-title">Fiche de préparation<br>Mercredi 4 - Mise en situation complète</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<!-- Estimated duration badge -->
|
||
<div class="fiche-badge">
|
||
<div class="badge-top">Durée estimée</div>
|
||
<div class="badge-bottom">~1h00</div>
|
||
</div>
|
||
|
||
<!-- Timer widget -->
|
||
<div class="timer-pill" id="timer-widget">
|
||
<div class="timer-texts">
|
||
<span class="timer-label">Minuteur préparation</span>
|
||
<span class="timer-display" id="timer-display">60:00</span>
|
||
</div>
|
||
<div class="timer-controls">
|
||
<button class="tcbtn" onclick="startTimer()" aria-label="Démarrer le minuteur">
|
||
<i class="ti ti-player-play" aria-hidden="true"></i>
|
||
</button>
|
||
<button class="tcbtn" onclick="pauseTimer()" aria-label="Pause">
|
||
<i class="ti ti-player-pause" aria-hidden="true"></i>
|
||
</button>
|
||
<button class="tcbtn" onclick="resetTimer()" aria-label="Réinitialiser">
|
||
<i class="ti ti-refresh" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
</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" aria-label="Prénom et nom" />
|
||
</div>
|
||
<div class="id-field">
|
||
<span class="field-label">Date de la séance</span>
|
||
<input class="field-line" type="text" placeholder="Mercredi __/__/____" aria-label="Date de la séance" />
|
||
</div>
|
||
<div class="id-field">
|
||
<span class="field-label">Complétée le</span>
|
||
<input class="field-line" type="text" placeholder="__/__/____" aria-label="Complétée le" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Informative Intro Block -->
|
||
<div class="intro-block">
|
||
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
||
<p>Cette fiche a deux parties distinctes. La <strong>partie 1</strong> est votre note de préparation pour la mise en situation de 20 min - à partager avec le formateur référent avant la séance. La <strong>partie 2</strong> est votre grille d'autoévaluation à blanc - à compléter seul, sans complaisance, avant d'arriver en séance.</p>
|
||
</div>
|
||
|
||
<!-- Warning Reminder capsule -->
|
||
<div class="reminder-box" aria-label="Conseil important">
|
||
<i class="ti ti-arrows-exchange" aria-hidden="true"></i>
|
||
<p><strong>Ce n'est plus un micro-teaching de 10 min.</strong> La mise en situation dure 20 min sur une séquence au choix - toutes UF confondues. Ce n'est plus un exercice ciblé : c'est une simulation terrain. Préparez-vous en conséquence.</p>
|
||
</div>
|
||
|
||
<!-- PART 1 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-file-text" aria-hidden="true"></i>Partie 1 - Note de préparation (à partager avant la séance)
|
||
</div>
|
||
|
||
<!-- Micro-block sequence card -->
|
||
<div class="micro-block">
|
||
<div class="micro-head">
|
||
<i class="ti ti-send" aria-hidden="true"></i>
|
||
<span class="micro-head-lbl">Votre séquence - 20 min · toutes UF possibles</span>
|
||
</div>
|
||
<div class="micro-body">
|
||
<div class="mb-row">
|
||
<span class="mb-key">Séquence choisie</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : UF2 – Ch.1 – Prompt Engineering (démo live + atelier ROCCO, 1h00)" aria-label="Séquence choisie"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Intention pédagogique</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ce que l'apprenant comprend ou sait faire à l'issue de vos 20 min - 1 phrase, pas une liste. Soyez précis : pas 'comprendre l'IA' mais 'rédiger un prompt en 3 itérations pour une tâche de son métier'." aria-label="Intention pédagogique"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Méthode retenue</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : Démo live commentée (5 min) → atelier ROCCO en binôme (10 min) → restitution et synthèse (5 min). Pas de slides, tableau blanc collaboratif." aria-label="Méthode retenue"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Adaptation visio</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ce que vous adaptez spécifiquement pour le format visioconférence : partage d'écran, breakout rooms, tableau blanc, minuteur visible…" aria-label="Adaptation visio"></textarea>
|
||
</div>
|
||
<div class="mb-row">
|
||
<span class="mb-key">Posture visée</span>
|
||
<textarea class="write-area" rows="2" placeholder="Ex. : Praticien qui montre son raisonnement à voix haute. Facilitateur de débat. Pair en exploration. Nommez-la précisément." aria-label="Posture visée"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title">
|
||
<i class="ti ti-clock" aria-hidden="true"></i>Partie 1 (suite) - Gestion du temps sur 20 min
|
||
</div>
|
||
|
||
<!-- Question 1 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">1</div>
|
||
<div class="q-text">Découpez vos 20 minutes en sous-étapes. Soyez précis sur les durées - c'est ce qui vous permettra de tenir le rythme en direct.</div>
|
||
</div>
|
||
<p class="q-hint">Si la somme de vos sous-étapes dépasse 20 min, retravaillez maintenant - pas en séance.</p>
|
||
|
||
<div class="two-col-areas">
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Durée</span>
|
||
<textarea class="write-area" rows="6" placeholder="0h05 0h10 0h03 0h02" aria-label="Durées sous-étapes"></textarea>
|
||
</div>
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Contenu / activité</span>
|
||
<textarea class="write-area" rows="6" placeholder="Introduction et consigne Démo live commentée Atelier en binôme Synthèse" aria-label="Contenu sous-étapes"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 2 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">2</div>
|
||
<div class="q-text">Quelle est la question imprévue la plus probable qu'un apprenant pourrait vous poser pendant ces 20 min ? Préparez une amorce de réponse.</div>
|
||
</div>
|
||
<p class="q-hint">Pas "quelle question difficile" en général - la question qui surgirait précisément pendant votre séquence, à ce moment-là.</p>
|
||
|
||
<div class="two-col-areas">
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">La question probable</span>
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : 'Est-ce que ce prompt fonctionnerait aussi sur Mistral ou c'est spécifique à ChatGPT ?'" aria-label="Question probable"></textarea>
|
||
</div>
|
||
<div class="mini-area-wrap">
|
||
<span class="mini-label">Mon amorce de réponse</span>
|
||
<textarea class="write-area" rows="3" placeholder="Ce que je dirais - sans chercher à être exhaustif, juste à tenir le fil." aria-label="Amorce de réponse"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- PART 2 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-chart-radar" aria-hidden="true"></i>Partie 2 - Grille d'autoévaluation à blanc (avant la séance)
|
||
</div>
|
||
|
||
<p style="font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 1.5rem; margin-top: -0.5rem;">Pour chaque compétence C1 à C6, évaluez-vous honnêtement sur une échelle de 1 à 4, et notez en quoi votre mise en situation de ce soir illustre (ou non) cette compétence. Cette autoévaluation sera confrontée aux grilles d'observation après votre passage.</p>
|
||
|
||
<!-- Auto-evaluation block -->
|
||
<div class="autoe-block">
|
||
<div class="autoe-head">
|
||
<i class="ti ti-adjustments" aria-hidden="true"></i>
|
||
<span class="autoe-lbl">Autoévaluation C1 à C6 - avant le passage</span>
|
||
</div>
|
||
<div class="autoe-body">
|
||
<div class="comp-row header">
|
||
<div class="cr-num head"><span>N°</span></div>
|
||
<div class="cr-comp" style="padding: 8px 12px;">
|
||
<span style="font-size: 0.7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary);">Compétence</span>
|
||
</div>
|
||
<div class="cr-scale head">1 · 2 · 3 · 4</div>
|
||
<div class="cr-obs head">Illustration dans ma mise en situation</div>
|
||
</div>
|
||
|
||
<!-- C1 -->
|
||
<div class="comp-row">
|
||
<div class="cr-num"><span>C1</span></div>
|
||
<div class="cr-comp">
|
||
<div>
|
||
<div class="cr-comp-text">Utiliser les outils IA</div>
|
||
<div class="cr-comp-sub">Sélectionner et justifier les outils adaptés au contexte</div>
|
||
</div>
|
||
</div>
|
||
<div class="cr-scale" role="radiogroup" aria-label="C1">
|
||
<label class="sopt"><input type="radio" name="c1" value="1" /><span>1</span></label>
|
||
<label class="sopt"><input type="radio" name="c1" value="2" /><span>2</span></label>
|
||
<label class="sopt"><input type="radio" name="c1" value="3" /><span>3</span></label>
|
||
<label class="sopt"><input type="radio" name="c1" value="4" /><span>4</span></label>
|
||
</div>
|
||
<div class="cr-obs">
|
||
<textarea class="cr-obs-ta" rows="2" placeholder="Comment ça se verra dans votre passage…" aria-label="C1 illustration"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C2 -->
|
||
<div class="comp-row">
|
||
<div class="cr-num"><span>C2</span></div>
|
||
<div class="cr-comp">
|
||
<div>
|
||
<div class="cr-comp-text">Prompt engineering</div>
|
||
<div class="cr-comp-sub">Rédiger des prompts efficaces selon la structure ROCCO</div>
|
||
</div>
|
||
</div>
|
||
<div class="cr-scale" role="radiogroup" aria-label="C2">
|
||
<label class="sopt"><input type="radio" name="c2" value="1" /><span>1</span></label>
|
||
<label class="sopt"><input type="radio" name="c2" value="2" /><span>2</span></label>
|
||
<label class="sopt"><input type="radio" name="c2" value="3" /><span>3</span></label>
|
||
<label class="sopt"><input type="radio" name="c2" value="4" /><span>4</span></label>
|
||
</div>
|
||
<div class="cr-obs">
|
||
<textarea class="cr-obs-ta" rows="2" placeholder="Comment ça se verra dans votre passage…" aria-label="C2 illustration"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C3 -->
|
||
<div class="comp-row">
|
||
<div class="cr-num"><span>C3</span></div>
|
||
<div class="cr-comp">
|
||
<div>
|
||
<div class="cr-comp-text">Sécuriser l'usage IA</div>
|
||
<div class="cr-comp-sub">RGPD, IA Act, shadow AI - identifier et réduire les risques</div>
|
||
</div>
|
||
</div>
|
||
<div class="cr-scale" role="radiogroup" aria-label="C3">
|
||
<label class="sopt"><input type="radio" name="c3" value="1" /><span>1</span></label>
|
||
<label class="sopt"><input type="radio" name="c3" value="2" /><span>2</span></label>
|
||
<label class="sopt"><input type="radio" name="c3" value="3" /><span>3</span></label>
|
||
<label class="sopt"><input type="radio" name="c3" value="4" /><span>4</span></label>
|
||
</div>
|
||
<div class="cr-obs">
|
||
<textarea class="cr-obs-ta" rows="2" placeholder="Comment ça se verra dans votre passage…" aria-label="C3 illustration"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C4 -->
|
||
<div class="comp-row">
|
||
<div class="cr-num"><span>C4</span></div>
|
||
<div class="cr-comp">
|
||
<div>
|
||
<div class="cr-comp-text">Contenus inclusifs</div>
|
||
<div class="cr-comp-sub">Produire des contenus accessibles avec l'IA (WCAG, FALC)</div>
|
||
</div>
|
||
</div>
|
||
<div class="cr-scale" role="radiogroup" aria-label="C4">
|
||
<label class="sopt"><input type="radio" name="c4" value="1" /><span>1</span></label>
|
||
<label class="sopt"><input type="radio" name="c4" value="2" /><span>2</span></label>
|
||
<label class="sopt"><input type="radio" name="c4" value="3" /><span>3</span></label>
|
||
<label class="sopt"><input type="radio" name="c4" value="4" /><span>4</span></label>
|
||
</div>
|
||
<div class="cr-obs">
|
||
<textarea class="cr-obs-ta" rows="2" placeholder="Comment ça se verra dans votre passage…" aria-label="C4 illustration"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C5 -->
|
||
<div class="comp-row">
|
||
<div class="cr-num"><span>C5</span></div>
|
||
<div class="cr-comp">
|
||
<div>
|
||
<div class="cr-comp-text">Optimiser les contenus IA</div>
|
||
<div class="cr-comp-sub">Réviser et améliorer un contenu généré selon des critères définis</div>
|
||
</div>
|
||
</div>
|
||
<div class="cr-scale" role="radiogroup" aria-label="C5">
|
||
<label class="sopt"><input type="radio" name="c5" value="1" /><span>1</span></label>
|
||
<label class="sopt"><input type="radio" name="c5" value="2" /><span>2</span></label>
|
||
<label class="sopt"><input type="radio" name="c5" value="3" /><span>3</span></label>
|
||
<label class="sopt"><input type="radio" name="c5" value="4" /><span>4</span></label>
|
||
</div>
|
||
<div class="cr-obs">
|
||
<textarea class="cr-obs-ta" rows="2" placeholder="Comment ça se verra dans votre passage…" aria-label="C5 illustration"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C6 -->
|
||
<div class="comp-row">
|
||
<div class="cr-num"><span>C6</span></div>
|
||
<div class="cr-comp">
|
||
<div>
|
||
<div class="cr-comp-text">Posture éthique</div>
|
||
<div class="cr-comp-sub">Analyser les impacts, identifier les biais, adopter un usage responsable</div>
|
||
</div>
|
||
</div>
|
||
<div class="cr-scale" role="radiogroup" aria-label="C6">
|
||
<label class="sopt"><input type="radio" name="c6" value="1" /><span>1</span></label>
|
||
<label class="sopt"><input type="radio" name="c6" value="2" /><span>2</span></label>
|
||
<label class="sopt"><input type="radio" name="c6" value="3" /><span>3</span></label>
|
||
<label class="sopt"><input type="radio" name="c6" value="4" /><span>4</span></label>
|
||
</div>
|
||
<div class="cr-obs">
|
||
<textarea class="cr-obs-ta" rows="2" placeholder="Comment ça se verra dans votre passage…" aria-label="C6 illustration"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Synthesis block inside auto-evaluation card -->
|
||
<div class="synth-row">
|
||
<div class="sr-col">
|
||
<span class="sr-lbl">Ma compétence la plus solide</span>
|
||
<textarea class="write-area" rows="2" placeholder="Celle sur laquelle vous vous appuyez dans cette mise en situation - avec un exemple concret…" aria-label="Compétence la plus solide"></textarea>
|
||
</div>
|
||
<div class="sr-col">
|
||
<span class="sr-lbl">Ma priorité de travail pour la Phase 2</span>
|
||
<textarea class="write-area" rows="2" placeholder="La compétence à renforcer en priorité avant les premières co-animations terrain…" aria-label="Priorité de travail Phase 2"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- PART 3 -->
|
||
<div class="section-title">
|
||
<i class="ti ti-mood-check" aria-hidden="true"></i>Partie 3 - Positionnement avant la séance
|
||
</div>
|
||
|
||
<!-- Question 3 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">3</div>
|
||
<div class="q-text">Comment vous sentez-vous à l'idée de cette mise en situation de 20 min - par rapport aux micro-teachings précédents ?</div>
|
||
</div>
|
||
|
||
<!-- Stress Level radio buttons styled premium -->
|
||
<div class="level-row" role="radiogroup" aria-label="Positionnement">
|
||
<label class="level-opt">
|
||
<input type="radio" name="pos" value="1">
|
||
<span>Beaucoup plus stressé(e)</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="pos" value="2">
|
||
<span>Un peu plus stressé(e)</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="pos" value="3">
|
||
<span>Pareil</span>
|
||
</label>
|
||
<label class="level-opt">
|
||
<input type="radio" name="pos" value="4">
|
||
<span>Plus confiant(e)</span>
|
||
</label>
|
||
</div>
|
||
|
||
<textarea class="write-area" rows="2" style="margin-top: 12px" placeholder="Ce qui explique cette position - la longueur, le contenu, le contexte de bilan, autre chose…" aria-label="Positionnement commentaire"></textarea>
|
||
</div>
|
||
|
||
<!-- Question 4 -->
|
||
<div class="question-block">
|
||
<div class="q-header">
|
||
<div class="q-num">4</div>
|
||
<div class="q-text">Qu'attendez-vous du bilan individuel en dyade avec le formateur référent ? Y a-t-il un point précis sur lequel vous voulez un retour ?</div>
|
||
</div>
|
||
|
||
<textarea class="write-area" rows="3" placeholder="Ex. : Je veux savoir si ma posture praticien est convaincante ou si je glisse encore vers l'exposé magistral. Et je veux comprendre sur quelles séquences je suis prêt pour la Phase 2." aria-label="Attentes dyade"></textarea>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- 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="signature-btn clear" onclick="clearSignature()">
|
||
<i class="ti ti-trash" aria-hidden="true"></i> Effacer
|
||
</button>
|
||
<button type="button" class="signature-btn save" 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="id-field">
|
||
<span class="field-label">Date de signature</span>
|
||
<input type="text" class="field-line" 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>
|
||
|
||
<!-- Footer strip with clear and print buttons -->
|
||
<div class="footer-strip">
|
||
<div class="footer-note">Partie 1 (note de préparation) à partager avec le formateur référent avant la séance. Partie 2 (autoévaluation à blanc) à apporter en séance - elle servira de base à l'échange en dyade.</div>
|
||
<div class="footer-btns">
|
||
<button class="signature-btn clear" onclick="clearAll()">
|
||
<i class="ti ti-eraser" aria-hidden="true"></i> Effacer toutes les saisies
|
||
</button>
|
||
<button class="print-btn" onclick="window.print()">
|
||
<i class="ti ti-printer" aria-hidden="true"></i>Imprimer la fiche
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
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_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_m4');
|
||
};
|
||
|
||
window.saveSignature = function() {
|
||
const signatureData = canvas.toDataURL('image/png');
|
||
localStorage.setItem('signatureData_m4', signatureData);
|
||
return signatureData;
|
||
};
|
||
|
||
// Chargement de la signature sauvegardée
|
||
const savedSignature = localStorage.getItem('signatureData_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_m4');
|
||
if (savedDate) signatureDate.value = savedDate;
|
||
|
||
signatureDate.addEventListener('input', () => {
|
||
localStorage.setItem('signatureDate_m4', signatureDate.value);
|
||
});
|
||
|
||
// Initialisation finale
|
||
initCanvas();
|
||
});
|
||
</script>
|
||
|
||
<!-- 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_m4_${index}`);
|
||
if (savedVal) t.value = savedVal;
|
||
|
||
t.addEventListener('input', () => {
|
||
localStorage.setItem(`textarea_fiche_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_fiche_m4_${index}`);
|
||
if (savedVal) input.value = savedVal;
|
||
|
||
input.addEventListener('input', () => {
|
||
localStorage.setItem(`input_fiche_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_fiche_m4_${name}`);
|
||
if (savedVal && radio.value === savedVal) {
|
||
radio.checked = true;
|
||
}
|
||
|
||
radio.addEventListener('change', () => {
|
||
localStorage.setItem(`radio_fiche_m4_${name}`, radio.value);
|
||
});
|
||
});
|
||
|
||
// 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('.field-line').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 = '';
|
||
|
||
// Remove from localStorage
|
||
const keysToRemove = [];
|
||
for (let i = 0; i < localStorage.length; i++) {
|
||
const key = localStorage.key(i);
|
||
if (key && (key.startsWith('textarea_fiche_m4_') || key.startsWith('input_fiche_m4_') || key.startsWith('radio_fiche_m4_') || key === 'signatureData_m4' || key === 'signatureDate_m4')) {
|
||
keysToRemove.push(key);
|
||
}
|
||
}
|
||
keysToRemove.forEach(k => localStorage.removeItem(k));
|
||
};
|
||
|
||
// Timer Logic (60 minutes)
|
||
let secs = 3600, interval = null;
|
||
|
||
function fmt(s) {
|
||
const m = Math.floor(s / 60), ss = s % 60;
|
||
return String(m).padStart(2, '0') + ':' + String(ss).padStart(2, '0');
|
||
}
|
||
|
||
function render() {
|
||
document.getElementById('timer-display').textContent = fmt(secs);
|
||
}
|
||
|
||
function startTimer() {
|
||
if (interval) return;
|
||
document.getElementById('timer-widget').classList.add('ticking');
|
||
interval = setInterval(() => {
|
||
if (secs <= 0) {
|
||
clearInterval(interval);
|
||
interval = null;
|
||
document.getElementById('timer-widget').classList.remove('ticking');
|
||
document.getElementById('timer-display').textContent = 'Temps !';
|
||
return;
|
||
}
|
||
secs--;
|
||
render();
|
||
}, 1000);
|
||
}
|
||
|
||
function pauseTimer() {
|
||
clearInterval(interval);
|
||
interval = null;
|
||
document.getElementById('timer-widget').classList.remove('ticking');
|
||
}
|
||
|
||
function resetTimer() {
|
||
clearInterval(interval);
|
||
interval = null;
|
||
secs = 3600;
|
||
document.getElementById('timer-widget').classList.remove('ticking');
|
||
render();
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|