1677 lines
52 KiB
HTML
1677 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Mercredi 4</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
:root {
|
||
--syne: 'Nunito', sans-serif;
|
||
--dm: 'DM Sans', sans-serif;
|
||
|
||
/* Cool dark slate text colors */
|
||
--ink: #0f172a;
|
||
--ink2: #334155;
|
||
--ink3: #475569;
|
||
--muted: #94a3b8;
|
||
|
||
/* Core primary violet theme */
|
||
--accent: #5b5fc7;
|
||
--accent2: #7c7ff0;
|
||
--accent-light: #eeeffe;
|
||
|
||
/* Accent Dimensions */
|
||
--teal: #0d9e75;
|
||
--teal-light: #e1f5ee;
|
||
--amber: #b87a10;
|
||
--amber-light: #faeeda;
|
||
--coral: #c44a20;
|
||
--coral-light: #faece7;
|
||
--rose: #b81d5b;
|
||
--rose-light: #fdf2f7;
|
||
|
||
/* Borders & surfaces */
|
||
--border: rgba(91, 95, 199, 0.12);
|
||
--surface: #f8fafc;
|
||
--white: #ffffff;
|
||
|
||
/* Premium shadows */
|
||
--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(91, 95, 199, 0.05), 0 2px 4px -2px rgba(91, 95, 199, 0.05);
|
||
--shadow-lg: 0 10px 25px -3px rgba(91, 95, 199, 0.08), 0 4px 12px -4px rgba(91, 95, 199, 0.08);
|
||
}
|
||
|
||
body {
|
||
background-color: #f8fafc;
|
||
background-image:
|
||
radial-gradient(at 0% 0%, hsla(247, 80%, 62%, 0.03) 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.01) 0px, transparent 50%);
|
||
background-attachment: fixed;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.course-wrap {
|
||
font-family: var(--dm);
|
||
color: var(--ink);
|
||
max-width: 880px;
|
||
margin: 0 auto;
|
||
padding: 2.5rem 24px 4rem;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
background: linear-gradient(135deg, #13132b 0%, #20204d 50%, #2f2f70 100%);
|
||
border-radius: 18px;
|
||
padding: 3rem 3rem 2.5rem;
|
||
margin-bottom: 2.5rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: -50px;
|
||
top: -50px;
|
||
width: 250px;
|
||
height: 250px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(124, 127, 240, 0.25) 0%, rgba(91, 95, 199, 0) 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 80px;
|
||
bottom: -80px;
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(124, 127, 240, 0.15) 0%, rgba(124, 127, 240, 0) 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-block;
|
||
background: rgba(91, 95, 199, 0.25);
|
||
color: #cbd5e1;
|
||
font-family: var(--syne);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
padding: 6px 14px;
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(124, 127, 240, 0.2);
|
||
margin-bottom: 1.25rem;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: var(--syne);
|
||
font-size: 32px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
line-height: 1.25;
|
||
margin-bottom: 0.75rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.hero-sub {
|
||
font-size: 16px;
|
||
color: #94a3b8;
|
||
font-weight: 400;
|
||
margin-bottom: 2rem;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.hero-meta {
|
||
display: flex;
|
||
gap: 2rem;
|
||
flex-wrap: wrap;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
padding-top: 1.25rem;
|
||
}
|
||
|
||
.hero-meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13.5px;
|
||
color: #cbd5e1;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hero-meta-item i {
|
||
font-size: 16px;
|
||
color: var(--accent2);
|
||
}
|
||
|
||
/* Section Labels */
|
||
.section-label {
|
||
font-family: var(--syne);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin: 2.5rem 0 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.section-label::after {
|
||
content: "";
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--border);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* Objectives Card */
|
||
.objectives-card {
|
||
background: var(--accent-light);
|
||
border: 1px solid rgba(91, 95, 199, 0.18);
|
||
border-radius: 16px;
|
||
padding: 1.75rem 2rem;
|
||
margin-bottom: 2rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.objectives-card h2 {
|
||
font-family: var(--syne);
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
margin-bottom: 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.objectives-card h2 i {
|
||
font-size: 18px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.obj-list {
|
||
list-style: none;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.obj-list li {
|
||
font-size: 14px;
|
||
color: var(--ink2);
|
||
font-weight: 400;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.obj-list li::before {
|
||
content: '✓';
|
||
color: var(--accent);
|
||
font-weight: 900;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
/* Prep Card */
|
||
.prep-card {
|
||
background: var(--amber-light);
|
||
border: 1px solid rgba(184, 122, 16, 0.15);
|
||
border-left: 4px solid var(--amber);
|
||
border-radius: 0 16px 16px 0;
|
||
padding: 1.5rem 2rem;
|
||
margin-bottom: 2.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.prep-card h2 {
|
||
font-family: var(--syne);
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: var(--amber);
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.prep-card h2 i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.prep-card ul {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.prep-card ul li {
|
||
font-size: 14px;
|
||
color: #5a3a08;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.prep-card ul li::before {
|
||
content: '▸';
|
||
color: var(--amber);
|
||
font-weight: 900;
|
||
flex-shrink: 0;
|
||
font-size: 16px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* Timeline */
|
||
.timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.seq-block {
|
||
display: grid;
|
||
grid-template-columns: 80px 1fr;
|
||
position: relative;
|
||
}
|
||
|
||
.seq-block:not(:last-child) .seq-line::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 48px;
|
||
bottom: -1px;
|
||
width: 2px;
|
||
background: var(--border);
|
||
transform: translateX(-50%);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.seq-time {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 14px;
|
||
position: relative;
|
||
}
|
||
|
||
.seq-line {
|
||
position: relative;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.seq-dot {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
font-size: 16px;
|
||
z-index: 1;
|
||
position: relative;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.seq-duration {
|
||
font-family: var(--syne);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
color: var(--muted);
|
||
margin-top: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.seq-content {
|
||
padding: 8px 0 24px 20px;
|
||
}
|
||
|
||
/* Sequence Cards */
|
||
.seq-card {
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 1.5rem;
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.seq-card:hover {
|
||
border-color: var(--accent2);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.seq-card.active {
|
||
border-color: var(--accent);
|
||
box-shadow: var(--shadow-lg), 0 0 0 3px rgba(91, 95, 199, 0.08);
|
||
}
|
||
|
||
.seq-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
}
|
||
|
||
.seq-num {
|
||
font-family: var(--syne);
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.seq-title {
|
||
font-family: var(--syne);
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
line-height: 1.35;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.seq-tag {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.tag-exchange {
|
||
background: var(--teal-light);
|
||
color: var(--teal);
|
||
}
|
||
|
||
.tag-analyse {
|
||
background: var(--accent-light);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.tag-atelier {
|
||
background: var(--coral-light);
|
||
color: var(--coral);
|
||
}
|
||
|
||
.tag-roleplay {
|
||
background: var(--rose-light);
|
||
color: var(--rose);
|
||
}
|
||
|
||
.tag-consigne {
|
||
background: var(--teal-light);
|
||
color: var(--teal);
|
||
}
|
||
|
||
.tag-debrief {
|
||
background: var(--amber-light);
|
||
color: var(--amber);
|
||
}
|
||
|
||
.tag-pause {
|
||
background: #f1f5f9;
|
||
color: var(--ink3);
|
||
}
|
||
|
||
.seq-toggle {
|
||
font-size: 18px;
|
||
color: var(--muted);
|
||
transition: transform 0.25s ease, color 0.2s;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.seq-card:hover .seq-toggle {
|
||
color: var(--ink2);
|
||
}
|
||
|
||
.seq-card.active .seq-toggle {
|
||
transform: rotate(180deg);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.seq-details {
|
||
display: none;
|
||
margin-top: 1.25rem;
|
||
padding-top: 1.25rem;
|
||
border-top: 1px solid var(--border);
|
||
animation: slideDown 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.seq-card.active .seq-details {
|
||
display: block;
|
||
}
|
||
|
||
.detail-section {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.detail-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detail-label {
|
||
font-family: var(--syne);
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.detail-text {
|
||
font-size: 14px;
|
||
color: var(--ink2);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.detail-list {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.detail-list li {
|
||
font-size: 13.5px;
|
||
color: var(--ink2);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.detail-list li::before {
|
||
content: '→';
|
||
color: var(--accent);
|
||
flex-shrink: 0;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Tips & Atelier Boxes */
|
||
.tips-box {
|
||
background: var(--teal-light);
|
||
border: 1px solid rgba(13, 158, 117, 0.15);
|
||
border-radius: 12px;
|
||
padding: 1rem 1.25rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.tips-box .tips-title {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
font-family: var(--syne);
|
||
color: var(--teal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tips-box ul {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tips-box ul li {
|
||
font-size: 13px;
|
||
color: #0b4f3b;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.tips-box ul li::before {
|
||
content: '●';
|
||
color: var(--teal);
|
||
font-size: 8px;
|
||
flex-shrink: 0;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.warn-box {
|
||
background: var(--amber-light);
|
||
border: 1px solid rgba(184, 122, 16, 0.15);
|
||
border-radius: 12px;
|
||
padding: 1rem 1.25rem;
|
||
margin-top: 1rem;
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.warn-box i {
|
||
color: var(--amber);
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.warn-box p {
|
||
font-size: 13px;
|
||
color: #5a3a08;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.warn-box strong {
|
||
font-weight: 800;
|
||
color: #3b2402;
|
||
}
|
||
|
||
/* Pause Card */
|
||
.pause-card {
|
||
border: 1px dashed rgba(122, 122, 154, 0.4);
|
||
background: var(--white);
|
||
border-radius: 16px;
|
||
padding: 1rem 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.pause-card span {
|
||
font-size: 13.5px;
|
||
color: var(--muted);
|
||
font-style: italic;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Triptyque Block */
|
||
.triptyque {
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
margin-top: 1rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.triptyque-header {
|
||
background: var(--accent-light);
|
||
padding: 0.75rem 1.25rem;
|
||
font-family: var(--syne);
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.triptyque-cols {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.triptyque-cols {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.triptyque-col {
|
||
border-right: none !important;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.triptyque-col:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.triptyque-col {
|
||
padding: 1.25rem;
|
||
border-right: 1px solid var(--border);
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.triptyque-col:hover {
|
||
background: #fafbfd;
|
||
}
|
||
|
||
.triptyque-col:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.triptyque-col .col-icon {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.col-blue {
|
||
background: var(--accent-light);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.col-teal {
|
||
background: var(--teal-light);
|
||
color: var(--teal);
|
||
}
|
||
|
||
.col-amber {
|
||
background: var(--amber-light);
|
||
color: var(--amber);
|
||
}
|
||
|
||
.triptyque-col h4 {
|
||
font-family: var(--syne);
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.triptyque-col p {
|
||
font-size: 12.5px;
|
||
color: var(--ink3);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Navigation Buttons */
|
||
.footer-nav {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.nav-btn {
|
||
flex: 1;
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 1.25rem;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.nav-btn:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(91, 95, 199, 0.1);
|
||
}
|
||
|
||
.nav-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.nb-label {
|
||
font-size: 10px;
|
||
font-family: var(--syne);
|
||
font-weight: 800;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 3px;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nb-title {
|
||
font-family: var(--syne);
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
line-height: 1.35;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nb-icon {
|
||
font-size: 22px;
|
||
color: var(--accent);
|
||
transition: transform 0.25s ease;
|
||
}
|
||
|
||
.nav-btn:hover .nb-icon {
|
||
transform: translateX(3px);
|
||
}
|
||
|
||
/* Progress Bar */
|
||
.progress-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 2.5rem;
|
||
background: var(--white);
|
||
padding: 12px 18px;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.prog-step {
|
||
flex: 1;
|
||
height: 8px;
|
||
border-radius: 4px;
|
||
background: #e2e8f0;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
outline: none;
|
||
}
|
||
|
||
.prog-step.done {
|
||
background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 100%);
|
||
box-shadow: 0 1px 3px rgba(91, 95, 199, 0.2);
|
||
}
|
||
|
||
.prog-step.current {
|
||
background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 100%);
|
||
box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent);
|
||
z-index: 2;
|
||
}
|
||
|
||
.prog-step:hover {
|
||
transform: scaleY(1.4);
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.prog-step:active {
|
||
transform: scaleY(1.1);
|
||
}
|
||
|
||
.prog-step.current:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.prog-step.current:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.prog-step:focus-visible {
|
||
box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent);
|
||
}
|
||
|
||
/* Tooltip styles */
|
||
.prog-step::after {
|
||
content: attr(data-tooltip);
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(4px);
|
||
background: var(--ink);
|
||
color: var(--white);
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-family: var(--syne);
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: var(--shadow-md);
|
||
z-index: 10;
|
||
}
|
||
|
||
.prog-step::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(4px);
|
||
border-width: 6px 6px 0;
|
||
border-style: solid;
|
||
border-color: var(--ink) transparent;
|
||
display: block;
|
||
width: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
z-index: 10;
|
||
}
|
||
|
||
.prog-step:hover::after,
|
||
.prog-step:focus-visible::after {
|
||
opacity: 1;
|
||
transform: translateX(-50%) translateY(0);
|
||
}
|
||
|
||
.prog-step:hover::before,
|
||
.prog-step:focus-visible::before {
|
||
opacity: 1;
|
||
transform: translateX(-50%) translateY(0);
|
||
}
|
||
|
||
.prog-label {
|
||
font-size: 11px;
|
||
color: var(--ink3);
|
||
font-family: var(--syne);
|
||
font-weight: 800;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
margin-left: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Specific classes for Mercredi 4 */
|
||
.pivot-card {
|
||
background: var(--teal-light);
|
||
border: 1px solid rgba(13, 158, 117, 0.15);
|
||
border-left: 4px solid var(--teal);
|
||
border-radius: 0 16px 16px 0;
|
||
padding: 1.5rem 2rem;
|
||
margin-bottom: 2.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.pivot-card h2 {
|
||
font-family: var(--syne);
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: var(--teal);
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.pivot-card p {
|
||
font-size: 14px;
|
||
color: #0b4f3b;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.chrono-box {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 1rem 1.25rem;
|
||
margin-top: 1rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.chrono-t {
|
||
font-family: var(--syne);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: .1em;
|
||
color: var(--accent);
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.chrono-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 8px;
|
||
}
|
||
|
||
.chrono-item {
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.ci-num {
|
||
font-family: var(--syne);
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.ci-val {
|
||
font-size: 13.5px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.bilan-box {
|
||
background: var(--white);
|
||
border: 1px solid rgba(13, 158, 117, 0.15);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
margin-top: 1.25rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.bilan-head {
|
||
background: var(--teal-light);
|
||
border-bottom: 1px solid rgba(13, 158, 117, 0.15);
|
||
padding: 0.75rem 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.bilan-lbl {
|
||
font-family: var(--syne);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
letter-spacing: .12em;
|
||
text-transform: uppercase;
|
||
color: var(--teal);
|
||
}
|
||
|
||
.bilan-body {
|
||
padding: 1.25rem;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.bilan-body {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.bc {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.bc-lbl {
|
||
font-family: var(--syne);
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.bc-text {
|
||
font-size: 13.5px;
|
||
color: var(--ink2);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.phase2-box {
|
||
background: #e6f1fb;
|
||
border: 1px solid rgba(24, 95, 165, 0.15);
|
||
border-radius: 16px;
|
||
padding: 1.25rem 1.5rem;
|
||
margin-top: 1.25rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.p2-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.p2-head i {
|
||
font-size: 20px;
|
||
color: #185fa5;
|
||
}
|
||
|
||
.p2-head span {
|
||
font-family: var(--syne);
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
color: #0c447c;
|
||
}
|
||
|
||
.p2-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.p2-item {
|
||
font-size: 13.5px;
|
||
color: #042c53;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.p2-item::before {
|
||
content: '→';
|
||
color: #185fa5;
|
||
flex-shrink: 0;
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* Extra tag color for Phase 2 tag */
|
||
.tag-phase2 {
|
||
background: #e6f1fb;
|
||
color: #185fa5;
|
||
}
|
||
|
||
/* Responsive Design */
|
||
@media (max-width: 860px) {
|
||
.course-wrap {
|
||
padding: 1.5rem 16px 3rem;
|
||
}
|
||
|
||
.hero {
|
||
padding: 2rem 2rem 1.75rem;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 26px;
|
||
}
|
||
|
||
.obj-list {
|
||
grid-template-columns: 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.footer-nav {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.nav-btn {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Print Styles */
|
||
@media print {
|
||
body {
|
||
background: white !important;
|
||
color: black !important;
|
||
-webkit-print-color-adjust: exact;
|
||
print-color-adjust: exact;
|
||
}
|
||
|
||
.course-wrap {
|
||
max-width: 100% !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.hero {
|
||
background: white !important;
|
||
border: 1px solid #cbd5e1 !important;
|
||
box-shadow: none !important;
|
||
padding: 1.5rem !important;
|
||
}
|
||
|
||
.hero h1 {
|
||
color: black !important;
|
||
}
|
||
|
||
.hero-sub,
|
||
.hero-meta-item,
|
||
.hero-badge {
|
||
color: #334155 !important;
|
||
}
|
||
|
||
.progress-bar,
|
||
.footer-nav {
|
||
display: none !important;
|
||
}
|
||
|
||
.seq-card {
|
||
box-shadow: none !important;
|
||
border: 1px solid #cbd5e1 !important;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.seq-details {
|
||
display: block !important;
|
||
}
|
||
|
||
.seq-toggle {
|
||
display: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="course-wrap">
|
||
<h2 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">
|
||
Cours complet Mercredi 4 - Mise en situation complète 20 minutes par formateur, débrief structuré, bilan individuel de compétences et plan d'action Phase 2
|
||
</h2>
|
||
|
||
<div class="hero">
|
||
<div class="hero-badge">Formation de formateurs IA · Séance 4/5</div>
|
||
<h1>Mise en situation complète & bilan de parcours</h1>
|
||
<div class="hero-sub">La dernière séance de pratique avant le terrain - 20 min par formateur, bilan de compétences & Phase 2</div>
|
||
<div class="hero-meta">
|
||
<div class="hero-meta-item"><i class="ti ti-calendar" aria-hidden="true"></i> Mercredi 4</div>
|
||
<div class="hero-meta-item"><i class="ti ti-clock" aria-hidden="true"></i> 13h30 – 17h00 · 3h30</div>
|
||
<div class="hero-meta-item"><i class="ti ti-video" aria-hidden="true"></i> Visioconférence</div>
|
||
<div class="hero-meta-item"><i class="ti ti-rotate-clockwise" aria-hidden="true"></i> Rotation de rôles</div>
|
||
<div class="hero-meta-item"><i class="ti ti-award" aria-hidden="true"></i> Bilan & Plan d'action</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-bar" aria-label="Progression du parcours">
|
||
<div class="prog-step done" onclick="goToSession(1)" role="button" tabindex="0"
|
||
aria-label="Séance 1 : Fondements et posture" data-tooltip="Séance 1 : Fondements et posture"></div>
|
||
<div class="prog-step done" onclick="goToSession(2)" role="button" tabindex="0"
|
||
aria-label="Séance 2 : Maîtriser UF1 & UF2" data-tooltip="Séance 2 : Maîtriser UF1 & UF2"></div>
|
||
<div class="prog-step done" onclick="goToSession(3)" role="button" tabindex="0"
|
||
aria-label="Séance 3 : Maîtriser UF3, UF4 & UF5" data-tooltip="Séance 3 : Maîtriser UF3, UF4 & UF5"></div>
|
||
<div class="prog-step done current" onclick="goToSession(4)" role="button" tabindex="0"
|
||
aria-label="Séance 4 : Mise en situation complète & bilan de parcours (Session actuelle)"
|
||
data-tooltip="Séance 4 : Mise en situation & Bilan (Actuelle)"></div>
|
||
<div class="prog-step" onclick="goToSession(5)" role="button" tabindex="0"
|
||
aria-label="Séance 5 : Évaluation finale et certification" data-tooltip="Séance 5 : Évaluation & Certification">
|
||
</div>
|
||
<span class="prog-label">Séance 4 / 5</span>
|
||
</div>
|
||
|
||
<div class="section-label">Ce qui change par rapport aux séances précédentes</div>
|
||
<div class="pivot-card">
|
||
<h2><i class="ti ti-arrows-exchange" aria-hidden="true"></i>Le pivot de la séance 4</h2>
|
||
<p>Les séances 2 et 3 travaillaient en micro-teachings de 10 min sur des séquences ciblées. La séance 4 passe à 20 min sur une séquence au choix - toutes UF confondues. Ce n'est plus un exercice ciblé : c'est une mise en situation complète qui simule le terrain réel. La rotation des rôles (formateur / apprenant / observateur) s'applique à tous - y compris pour l'observation structurée avec la grille. Et la séance se conclut sur un bilan individuel de compétences et l'attribution des premières séquences pour la Phase 2.</p>
|
||
</div>
|
||
|
||
<div class="section-label">Objectifs de la séance</div>
|
||
<div class="objectives-card">
|
||
<h2><i class="ti ti-target" aria-hidden="true"></i>À l'issue de cette séance, vous serez capables de…</h2>
|
||
<ul class="obj-list">
|
||
<li>Animer une séquence complète de 20 min en gérant le temps, le groupe et les imprévus</li>
|
||
<li>Utiliser la grille d'observation pour donner un feedback précis et constructif à un pair</li>
|
||
<li>Identifier vos points forts et axes de travail à partir d'un bilan de compétences structuré</li>
|
||
<li>Repartir avec vos premières séquences attribuées pour la Phase 2 de co-animation</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-label">Travail préparatoire - classe inversée (~1h)</div>
|
||
<div class="prep-card">
|
||
<h2><i class="ti ti-book" aria-hidden="true"></i>À faire avant la séance</h2>
|
||
<ul>
|
||
<li>Préparer une animation de 20 min (séquence au choix dans n'importe quelle UF) - intention pédagogique, méthode retenue, adaptation prévue pour la visio.</li>
|
||
<li>Rédiger une note de préparation courte (3-4 phrases) : intention pédagogique, méthode, adaptation visio. À partager avec le formateur référent avant la séance.</li>
|
||
<li>Compléter la grille d'autoévaluation à blanc : s'évaluer soi-même avant la mise en situation, sans complaisance. Cette autoévaluation sera comparée aux retours de la grille d'observation après le passage.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-label">Livrables produits lors de cette séance</div>
|
||
<div class="triptyque">
|
||
<div class="triptyque-header">
|
||
<i class="ti ti-package" aria-hidden="true"></i>Livrables et traces de la séance
|
||
</div>
|
||
<div class="triptyque-cols">
|
||
<div class="triptyque-col">
|
||
<div class="col-icon col-blue"><i class="ti ti-clipboard-check" aria-hidden="true"></i></div>
|
||
<h4>Grille d'observation</h4>
|
||
<p>Complétée par les pairs + le formateur référent pour chaque passage</p>
|
||
</div>
|
||
<div class="triptyque-col">
|
||
<div class="col-icon col-teal"><i class="ti ti-chart-radar" aria-hidden="true"></i></div>
|
||
<h4>Bilan individuel</h4>
|
||
<p>Autoévaluation C1–C6 + retour du formateur référent en dyade</p>
|
||
</div>
|
||
<div class="triptyque-col">
|
||
<div class="col-icon col-amber"><i class="ti ti-map-2" aria-hidden="true"></i></div>
|
||
<h4>Plan d'action Phase 2</h4>
|
||
<p>Séquences attribuées + priorités de travail avant le terrain</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-label">Déroulé détaillé · 5 séquences</div>
|
||
<div class="timeline">
|
||
|
||
<!-- Sequence 1 -->
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--teal-light); color: var(--teal);">
|
||
<i class="ti ti-message-circle" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
<div class="seq-duration">0h10</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">13h30 · Séquence 1</div>
|
||
<div class="seq-title">Débrief classe inversée & cadrage</div>
|
||
</div>
|
||
<span class="seq-tag tag-exchange">Échanges</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Tour de table rapide sur les notes de préparation. Chaque formateur présente en 1 min l'intention de sa séquence et la méthode retenue. Le formateur référent pointe d'emblée les intentions floues ou les méthodes inadaptées - sans entrer dans le détail, juste pour calibrer le groupe avant les passages.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Ce que vous animez</div>
|
||
<ul class="detail-list">
|
||
<li>Tour de table 1 min par formateur : séquence choisie + intention en 1 phrase + méthode retenue</li>
|
||
<li>Rappel des critères d'évaluation : contenu / méthode / posture - et pour certaines séquences, gestion des situations sensibles</li>
|
||
<li>Rappel des rôles pendant les passages : formateur (anime) - apprenants actifs (posent de vraies questions) - observateur (grille)</li>
|
||
<li>Préciser l'enjeu : "Ce n'est plus un micro-teaching d'entraînement - c'est une mise en situation qui compte. Vous êtes prêts."</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Conseil d'animation</div>
|
||
<ul>
|
||
<li>10 minutes maximum - le groupe veut passer. Ne pas s'étirer sur le cadrage.</li>
|
||
<li>Si une intention est floue, pointez-le brièvement et laissez le formateur y répondre dans son passage - pas ici.</li>
|
||
<li>Montrer le panneau de progression : c'est la 4e séance, l'avant-dernière. Marquer symboliquement que le parcours touche à sa fin.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sequence 2 -->
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--rose-light); color: var(--rose);">
|
||
<i class="ti ti-player-play" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
<div class="seq-duration">1h20</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">13h40 · Séquence 2</div>
|
||
<div class="seq-title">Mise en situation - animation complète (20 min × n formateurs)</div>
|
||
</div>
|
||
<span class="seq-tag tag-roleplay">Mise en situation</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Chaque formateur anime sa séquence de 20 min. Le groupe joue le rôle d'apprenants - actifs, pas passifs. Les observateurs utilisent la grille d'observation. Rotation des rôles à chaque passage. Le formateur référent observe tous les passages et complète sa propre grille.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Calcul du temps selon le nombre de formateurs</div>
|
||
<div class="chrono-box">
|
||
<div class="chrono-t"><i class="ti ti-clock" aria-hidden="true"></i>Durée disponible : 1h20 (avant la pause)</div>
|
||
<div class="chrono-grid">
|
||
<div class="chrono-item">
|
||
<div class="ci-num">3 formateurs</div>
|
||
<div class="ci-val">3 × 20 min = 60 min ✓</div>
|
||
</div>
|
||
<div class="chrono-item">
|
||
<div class="ci-num">4 formateurs</div>
|
||
<div class="ci-val">4 × 20 min = 80 min → reprise après pause</div>
|
||
</div>
|
||
<div class="chrono-item">
|
||
<div class="ci-num">5 formateurs</div>
|
||
<div class="ci-val">Réduire à 15 min ou scinder sur 2 blocs</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Organisation pratique</div>
|
||
<ul class="detail-list">
|
||
<li>Rôles clairement distribués avant chaque passage : qui anime, qui est apprenant, qui observe avec la grille</li>
|
||
<li>Les apprenants jouent un rôle réaliste - questions sincères, niveau adapté à la séquence. Pas de déstabilisation systématique comme au Mercredi 3 - sauf si le passage porte sur UF3/UF4/UF5</li>
|
||
<li>Le formateur référent ne joue pas l'apprenant - il observe et complète sa grille pendant chaque passage</li>
|
||
<li>Débrief court entre chaque passage (2-3 min) pour noter les premières impressions à chaud, avant d'ouvrir le débrief structuré en séquence 4</li>
|
||
</ul>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Ce qui est évalué différemment vs les micro-teachings</div>
|
||
<ul class="detail-list">
|
||
<li>La gestion du temps sur 20 min est plus exigeante : le formateur doit calibrer son rythme, pas juste tenir 10 min</li>
|
||
<li>La transition entre les sous-parties de la séquence : comment le formateur articule les étapes, relie les activités, synthétise</li>
|
||
<li>La réponse aux questions imprévues : sur 20 min, il s'en pose forcément une qu'on n'attendait pas</li>
|
||
</ul>
|
||
</div>
|
||
<div class="warn-box">
|
||
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
||
<p><strong>Point de vigilance chrono :</strong> avec 4 formateurs ou plus, les passages débordent sur la pause ou le bloc débrief. Décider en début de séance si on réduit à 15 min ou si on décale - et le dire clairement. Ne pas laisser le groupe découvrir le dépassement en cours de route.</p>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Conseils d'animation</div>
|
||
<ul>
|
||
<li>Afficher un compte à rebours visible pour tous - à 5 min de la fin, donner un signal discret au formateur qui anime.</li>
|
||
<li>Si un formateur finit en avance, ouvrir immédiatement les questions du groupe - le temps est utilisé, pas perdu.</li>
|
||
<li>Si un passage est particulièrement fort, le noter maintenant pour le valoriser explicitement dans le débrief structuré.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pause -->
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: #f1f5f9; color: var(--ink3);">
|
||
<i class="ti ti-coffee" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
<div class="seq-duration">0h15</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="pause-card">
|
||
<i class="ti ti-coffee" style="font-size:18px;color:var(--muted);" aria-hidden="true"></i>
|
||
<span>Pause - 15h00 à 15h15 (ajuster selon le nombre de formateurs)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sequence 3 -->
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--amber-light); color: var(--amber);">
|
||
<i class="ti ti-star" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
<div class="seq-duration">0h30</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">15h15 · Séquence 3</div>
|
||
<div class="seq-title">Débrief collectif et individuel</div>
|
||
</div>
|
||
<span class="seq-tag tag-debrief">Débrief structuré</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Restitution des grilles d'observation pour chaque passage. Retour du formateur référent : points forts confirmés sur l'ensemble du parcours, axes de travail à prioriser pour la Phase 2. C'est le débrief le plus dense du parcours - il sert à la fois de bilan de séance et d'amorce du bilan individuel.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Structure du débrief (30 min pour 3-4 formateurs)</div>
|
||
<ul class="detail-list">
|
||
<li>Par passage : autoévaluation du formateur (1 min) → restitution grille observateurs (1 point fort + 1 axe, 1 min max) → retour formateur référent (1 min)</li>
|
||
<li>Le formateur référent pointe les éléments transversaux : ce qui revient chez plusieurs formateurs est souvent révélateur d'un point de contenu difficile à enseigner</li>
|
||
<li>Valoriser explicitement la progression depuis la séance 2 - les formateurs ne mesurent pas toujours eux-mêmes le chemin parcouru</li>
|
||
<li>Conclure le débrief collectif par : "Ce que vous emportez comme force dans la Phase 2" - une phrase positive par formateur, donnée par le formateur référent</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Posture de débrief</div>
|
||
<ul>
|
||
<li>Commencer par les points forts - toujours. Le débrief final du parcours doit ancrer la confiance, pas creuser les doutes.</li>
|
||
<li>Les axes de travail sont formulés comme des priorités pour la Phase 2, pas comme des manques. "À renforcer avant le terrain" et non "ce qui n'allait pas".</li>
|
||
<li>Garder du temps pour la séquence bilan - ne pas déborder sur les 0h20 prévus pour l'autoévaluation.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sequence 4 -->
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--accent-light); color: var(--accent);">
|
||
<i class="ti ti-chart-radar" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
<div class="seq-duration">0h20</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">15h45 · Séquence 4</div>
|
||
<div class="seq-title">Bilan individuel de compétences</div>
|
||
</div>
|
||
<span class="seq-tag tag-analyse">Autoévaluation</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Chaque formateur complète son bilan individuel de compétences C1–C6. Discussion rapide en dyade avec le formateur référent : confrontation entre l'autoévaluation et les retours des grilles d'observation. Ce moment est confidentiel - les échanges en dyade ne sont pas partagés en plénière.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Ce que le bilan couvre</div>
|
||
<div class="bilan-box">
|
||
<div class="bilan-head">
|
||
<i class="ti ti-list-check" style="font-size:15px;color:var(--teal);" aria-hidden="true"></i>
|
||
<span class="bilan-lbl">Structure du bilan individuel</span>
|
||
</div>
|
||
<div class="bilan-body">
|
||
<div class="bc">
|
||
<div class="bc-lbl">Compétences acquises</div>
|
||
<div class="bc-text">C1 à C6 - pour chacune : "je suis capable de…" avec un exemple issu des mises en situation</div>
|
||
</div>
|
||
<div class="bc">
|
||
<div class="bc-lbl">Compétences à renforcer</div>
|
||
<div class="bc-text">Maximum 2 priorités - formulées comme objectifs concrets pour la Phase 2</div>
|
||
</div>
|
||
<div class="bc">
|
||
<div class="bc-lbl">Comparaison autoéval / grilles</div>
|
||
<div class="bc-text">Points de convergence et d'écart entre la perception de soi et les observations des pairs</div>
|
||
</div>
|
||
<div class="bc">
|
||
<div class="bc-lbl">1 engagement Phase 2</div>
|
||
<div class="bc-text">Une chose concrète à mettre en œuvre dès la première co-animation</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Animation des dyades</div>
|
||
<ul>
|
||
<li>Prévoir 5 min par dyade - impossible de tout traiter, choisir le point le plus utile pour la Phase 2.</li>
|
||
<li>La question pivot en dyade : "Par rapport à ce que tu t'es autoévalué et ce que tu as reçu comme feedback - qu'est-ce qui te surprend ?"</li>
|
||
<li>Si un formateur sous-évalue ses compétences, nommer explicitement ce que vous avez observé de positif - ne pas laisser partir quelqu'un avec une image dégradée de lui-même.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sequence 5 -->
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: #e6f1fb; color: #185fa5;">
|
||
<i class="ti ti-rocket" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
<div class="seq-duration">0h15</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">16h05 · Séquence 5</div>
|
||
<div class="seq-title">Plan d'action & prochaines étapes</div>
|
||
</div>
|
||
<span class="seq-tag tag-phase2">Phase 2</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Présentation du passage en Phase 2 (co-animation). Attribution des premières séquences à chaque formateur. Calendrier des sessions IA-PRO prévues. Annonce de la séance 5 et de son enjeu : préparation et entraînement à la certification.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Le passage en Phase 2 - ce que vous annoncez</div>
|
||
<div class="phase2-box">
|
||
<div class="p2-head">
|
||
<i class="ti ti-arrows-exchange" aria-hidden="true"></i>
|
||
<span>De la formation à la co-animation</span>
|
||
</div>
|
||
<div class="p2-items">
|
||
<div class="p2-item">La Phase 2 démarre après cette séance : chaque formateur anime en co-animation avec le formateur référent sur les premières sessions IA-PRO réelles</div>
|
||
<div class="p2-item">Attribution des séquences : chaque formateur reçoit ses premières séquences assignées - en tenant compte de ses points forts identifiés dans le bilan</div>
|
||
<div class="p2-item">Le formateur référent reste présent en observation lors des premières co-animations - avec retour structuré après chaque session</div>
|
||
<div class="p2-item">La séance 5 (Mercredi 5) reste en parallèle : entraînement certification avant les premières sessions terrain</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Pour clore le parcours de formation</div>
|
||
<ul class="detail-list">
|
||
<li>Un mot de chaque formateur : ce qu'il retient du parcours en une phrase - pas de la séance, du parcours entier</li>
|
||
<li>Le formateur référent conclut : ce qu'il a observé de la progression collective depuis le Mercredi 1</li>
|
||
<li>Rappel de la date et de l'enjeu du Mercredi 5 : simulation certification, conditions proches du réel</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Comment fermer avec intention</div>
|
||
<ul>
|
||
<li>Ne pas expédier cette séquence - c'est le moment de fermeture symbolique du parcours de formation. Lui donner le poids qu'il mérite.</li>
|
||
<li>L'attribution des séquences est un acte de reconnaissance : nommer pourquoi vous confiez telle séquence à tel formateur ("je te donne l'UF2 prompt parce que ta posture praticien était vraiment solide").</li>
|
||
<li>Finir sur une note de confiance - "Vous êtes prêts" doit être dit explicitement, pas seulement implicitement.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer-nav">
|
||
<div class="nav-btn" onclick="sendPrompt('Génère-moi la fiche classe inversée pour le Mercredi 4')">
|
||
<i class="ti ti-file-plus nb-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="nb-label">Ressource</div>
|
||
<div class="nb-title">Fiche classe inversée Mercredi 4 ↗</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-btn" onclick="sendPrompt('Génère-moi le bilan individuel de compétences C1–C6 pour le Mercredi 4')">
|
||
<i class="ti ti-chart-radar nb-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="nb-label">Livrable</div>
|
||
<div class="nb-title">Bilan individuel C1–C6 ↗</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-btn" onclick="goToSession(5)">
|
||
<i class="ti ti-arrow-right nb-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="nb-label">Suite du parcours</div>
|
||
<div class="nb-title">Cours Mercredi 5 ↗</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function tog(card) {
|
||
const was = card.classList.contains('active');
|
||
document.querySelectorAll('.seq-card').forEach(c => c.classList.remove('active'));
|
||
if (!was) card.classList.add('active');
|
||
}
|
||
|
||
function goToSession(num) {
|
||
if (num === 1) {
|
||
window.location.href = 'index.html';
|
||
return;
|
||
}
|
||
|
||
if (num === 2) {
|
||
window.location.href = 'mercredi2_maitriser_UF1_UF2.html';
|
||
return;
|
||
}
|
||
|
||
if (num === 3) {
|
||
window.location.href = 'mercredi3_maitriser_UF3_UF4_UF5.html';
|
||
return;
|
||
}
|
||
|
||
if (num === 4) {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
const badge = document.querySelector('.hero-badge');
|
||
if (badge) {
|
||
badge.style.transform = 'scale(1.08)';
|
||
badge.style.transition = 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
||
setTimeout(() => badge.style.transform = 'scale(1)', 300);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (num === 5) {
|
||
window.location.href = 'mercredi5_preparation_certification_IA.html';
|
||
return;
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('.prog-step').forEach(step => {
|
||
step.addEventListener('keydown', e => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
step.click();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |